How to use a custom font?

mikolalysenko / vectorize-text

Turns a text string into a 2D poly line

MIT License

311 stars 21 forks source link

How to use a custom font? #12

Open TimotheAlbouy opened 5 years ago

TimotheAlbouy commented 5 years ago

I know that we can use the option.font property to change the font, but it only searches for web-safe fonts. How can I use a custom font that I stored on the server, let's say /public/fonts/Wurmics_Bravo.ttf?

rubillionaire commented 6 months ago

Using the FontFace API you can load a font, and then reference the name (first argument to FontFace) within your vectorize text options.

// load your font
const font = new FontFace('Fredoka', "url('fonts/Fredoka-SemiBold.ttf')")
await font.load()
document.fonts.add(font)
// make a mesh from it
const mesh = vectorizeText(char, {
  triangles: true,
  textBaseline: "alphabetic",
  font: 'Fredoka',
  size: '10px',
  textAlign: 'center',
})