lovell / lovell/sharp

Using `fontfile` with text input

Open
#4,577 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

question
Dominant language
JavaScript
Stars
32.7k
Forks
1.4k
Avg merge
1d 14h
Merged PRs (30d)
5

Description

Question about an existing feature

What are you trying to achieve?

I’m creating an image using the { text } input and want to use a custom font (not a system-installed font) via the the fontfile option, but can’t get it working. (Apologies in advance if I’m holding it wrong.)

When you searched for similar issues, what did you find that might be related?

#3778, #4523, and #4208. #4208 in particular seems to overlap a lot, but the discussion didn’t help me.

Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this question
await sharp({
	text: {
		text: 'example',
		width: 800,
		height: 800,
		font: 'Relevant Font',
		fontfile: "/Users/user/repo/path/to/font.ttf",
	},
})
	.png()
	.toBuffer();

As an example, I downloaded this TTF font: https://github.com/propublica/weepeople/blob/master/weepeople.ttf
Set fontfile to point to it.
And tried various font values (WeePeople, WeePeople Regular, Wee People Regular, weepeople, etc.)
(The issue does not appear to be specific to this font file though, I’ve tried with various fonts with the same result.)

In all cases the fontfile appears to have no effect.

I tried setting FC_DEBUG=1 on the process running sharp. This caused FC_DEBUG=1 to be logged the first time sharp was called. But there was no other additional logging.

In case it’s relevant, some system info: Node.js 24.18.0 on macOS 15.7.7 (darwin-x64 versions of sharp/libvips via npm)

Please provide sample image(s) that help explain this question

Here’s what the code above produces, regardless of font/fontfile options:

Image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the standalone sharp text-input call with the supplied WeePeople TTF and the different font/fontfile combinations. Trace how the text input handles fontfile and compare the rendered output; done means a custom font file changes the generated image as requested.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
computer-graphics
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.