Does not produce image with desired font

[gtkpr]

Possible bug

Is this a possible bug in a feature of sharp, unrelated to installation?

• Running npm install sharp completes without error.
• Running node -e "require('sharp')" completes without error.

If you cannot confirm both of these, please open an installation issue instead.

Are you using the latest version of sharp?

• I am using the latest version of sharp as reported by npm view sharp dist-tags.latest.

If you cannot confirm this, please upgrade to the latest version and try again before opening an issue.

If you are using another package which depends on a version of sharp that is not the latest, please open an issue against that package instead.

What is the output of running npx envinfo --binaries --system --npmPackages=sharp --npmGlobalPackages=sharp?

System:
OS: Windows 11 10.0.22631
CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
Memory: 19.37 GB / 31.92 GB
Binaries:
Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 10.4.0 - C:\Program Files\nodejs\npm.CMD
npmPackages:
sharp: ^0.33.3 => 0.33.3

What are the steps to reproduce?

1. Install Sharp as a dependency
2. Create index.js with following code

const
  sharp = require('sharp'),
  text = 'Blah!',
  font = {
    file: 'font.ttf',

                    // NONE OF THESE PATHS WORK...
                    //
                    // font.ttf
                    // /font.ttf
                    // ./font.ttf
                    // C:/Users/[MY NAME]/Desktop/nodejs_sharp_demo/font.ttf
                    // C:\\Users\\[MY NAME]\\Desktop\\nodejs_sharp_demo\\font.ttf

    size: 48,
    color: '#000',
    background: '#fff'
  },
  outputFile = 'output.png'

sharp({
  create: {
    width: 400,
    height: 200,
    channels: 4,
    background: font.background
  }
})
.composite([{
  input: Buffer.from(`
    <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
      <defs>
        <style>
          <![CDATA[
            @font-face {
              font-family: 'desiredFont';
              src: url('${font.file}');
            }
          ]]>
        </style>
      </defs>
      <text x="10" y="100" font-family="desiredFont" font-size="${font.size}" fill="${font.color}">${text}</text>
    </svg>
  `),
  left: 0,
  top: 0
}])
.png()
.toFile(outputFile, (err, info) => {
    if (err) {
        console.error('Error rendering image:', err)
    } else {
        console.log('Image created successfully:', info)
    }
})

3. Execute the script using node index.js

What is the expected behaviour?

Render an image of text in the desired font

Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this problem

Copying the code above should allow anybody to replicate this issue.

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

[lovell]

https://sharp.pixelplumbing.com/install#fonts

Embedded SVG fonts are unsupported.

Please see #2838

You'll need to ensure the named font is made available via the OS.

[gtkpr]

You'll need to ensure the named font is made available via the OS.

What do you mean by "made available via the OS"? The fonts that I was trying to load were installed locally on my machine even though I had changed the actual file name to font.ttf etc.

[lovell]

The src property of @font-face is unsupported.

[lovell]

@gtkpr Were you able to make any progress with this?

[gtkpr]

The src property of @font-face is unsupported.

I had stopped trying as you said that it was unsupported? I have since found another solution. Out of curiosity, it is supported?

[lovell]

Thanks for the update, you are correct, src is still unsupported within SVG @font-face directives.