I have a folder in my server with several fonts (myserver/fonts). and I have a JavaScript application where I would like to use those fonts on. but I have no idea how to load the fonts and use them. does anyone know how to load truetype fonts? I know I can do it with Cufon fonts but I'd rather use truetype.

PS. I'm new in JavaScript any examples would be greatly appreciated.

I have a folder in my server with several fonts (myserver./fonts). and I have a JavaScript application where I would like to use those fonts on. but I have no idea how to load the fonts and use them. does anyone know how to load truetype fonts? I know I can do it with Cufon fonts but I'd rather use truetype.

PS. I'm new in JavaScript any examples would be greatly appreciated.

• javascript
• fonts
• truetype

• Use css font-face declaration – Esailija Commented Nov 13, 2012 at 14:34

3 Answers 3

Use CSS font face.

@font-face { font-family: Delicious; src: url('myserver./fonts/Delicious-Roman.ttf'); } 
@font-face { font-family: Delicious; font-weight: bold; src: url('myserver./fonts/Delicious-Bold.otf'); }

Then call it using font-family:

h3 { font-family: Delicious, sans-serif; }

You can use any licensed TrueType (.ttf) or OpenType (.otf) font.

You can load fonts with javaScript via FontFace() method.

Basic version:

async function loadFonts() {
  const font = new FontFace("font-family name", "url(fontfile.ttf)", {
    style: "normal",
    weight: "400",
    stretch: "condensed",
  });
  // wait for font to be loaded
  await font.load();
  // add font to document
  document.fonts.add(font);

  // callback: do something, render a font to canvas etc
  document.body.classList.add("fonts-loaded");
}

Example: draw text to canvas after loading

loadFonts(fonts);

function drawText() {
  const canvas = document.querySelector("canvas");
  const context = canvas.getContext("2d");
  context.font = "48px Inter";
  context.fontWeight = 400;
  context.fontStyle = "normal";
  context.textAlign = "center";
  context.textBaseline = "middle";
  context.fillText("Inter", 150, 50);

  context.font = "48px Anton";
  context.fontWeight = 400;
  context.fontStyle = "normal";
  context.textAlign = "left";
  context.textBaseline = "top";
  context.fillText("Anton", 0, 100);
  
  console.log("draw");
}


async function loadFonts(fontsToLoad) {
    for (let i = 0; i < fontsToLoad.length; i++) {
      let fontProps = fontsToLoad[i];
      let fontFamily = fontProps["font-family"];
      let fontWeight = fontProps["font-weight"];
      let fontStyle = fontProps["font-style"];
      let fontUrl = Array.isArray(fontProps["src"]) ?
        fontProps["src"][0][0] :
        fontProps["src"];
      if (fontUrl.indexOf("url(") === -1) {
        fontUrl = "url(" + fontUrl + ")";
      }
      let fontFormat = fontProps["src"][0][1] ? fontProps["src"][1] : "";
      const font = new FontFace(fontFamily, fontUrl);
      font.weight = fontWeight;
      font.style = fontStyle;
      await font.load();
      document.fonts.add(font);
      console.log(fontFamily, "loaded");
    }
    drawText()
}

canvas {
  height: 50vh;
  border: 1px solid red
}

<p>Draw to canvas</p>
<canvas class="text" />

<script>
  let fonts = [{
      // Inter as replacement
      "font-family": "Inter",
      "font-style": "normal",
      "font-weight": 400,
      src: "https://fonts.gstatic./s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2"
    },
    {
      // Anton  as replacement
      "font-family": "Anton",
      "font-style": "normal",
      "font-weight": 400,
      src: "https://fonts.gstatic./s/anton/v23/1Ptgg87LROyAm3Kz-C8.woff2"
    }
  ];
</script>

The above canvas example wouldn't work well if the fonts were loaded with css.
Most browsers won't load fonts if they aren't used anywhere in your HTML.
The FontFace() method makes sure, all fonts are loaded - whether they are applied to visible elements or not.

https://opentype.js can helps you to load true type font using javscript

One of Example :

opentype.load('fonts/Roboto-Black.ttf', function(err, font) {
if (err) {
    alert('Font could not be loaded: ' + err);
} else {
    // Now let's display it on a canvas with id "canvas"
    const ctx = document.getElementById('canvas').getContext('2d');

    // Construct a Path object containing the letter shapes of the given text.
    // The other parameters are x, y and fontSize.
    // Note that y is the position of the baseline.
    const path = font.getPath('Hello, World!', 0, 150, 72);

    // If you just want to draw the text you can also use 
    font.draw(ctx,text, x, y, fontSize).path.draw(ctx);
    }
});

More examples available at: https://github./opentypejs/opentype.js