-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using custom fonts from a ttf file #4208
Comments
Did you see https://sharp.pixelplumbing.com/install#fonts and https://www.freedesktop.org/software/fontconfig/fontconfig-user.html and the |
@lovell I have seen the first link but not the second. This is not an installed font in the OS. In this case I want to read from a About the font config, I have never created one before. If I use the example config file from the second link, where would it go when it eventually gets deployed to vercel? |
What is the output from fontconfig when you set the |
@lovell I get this error: |
@muezz I was running into the same issue. Here's how I solved it for a font called Beaufort. I put the font and all its variations into a dir in my repo. Then, create a fonts.conf file like this: <?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
<dir>/path/to/the/dir/containing/your/font</dir>
<match>
<test name="family" compare="contains">
<string>Beaufort</string>
</test>
<edit name="antialias" mode="assign">
<bool>true</bool>
</edit>
<edit name="hinting" mode="assign">
<bool>true</bool>
</edit>
</match>
</fontconfig> You can do this in your console, but I run it on node app start const configFilePath = path.resolve("yourConfigDir", "fonts.conf");
// Set environment variable for fontconfig
process.env.FONTCONFIG_FILE = configFilePath;
// Run fc-cache to refresh the font cache with your custom fonts directory
await execPromise("fc-cache -fv"); I am really no expert on this stuff, but this is what got it working in my project. |
How can I use a custom font from a ttf file?
I have a file called
Righteous.ttf
. I am not able to use this font in the image.In my NextJS project, I have an API that is supposed to merge two images and overlay a title on it in a particular font. The font file is in the format
.ttf
and exists in the same folder as the api:Here is the code where I am trying to use this font:
What am I doing wrong here? The docs dont have an example for this (or at least I can't find it).
The text was updated successfully, but these errors were encountered: