CODEWITHSUNDEEP
javascriptfontstruetype
user1745713
user1745713

Reputation: 791

Is it possible to load truetype fonts using javascript

I have a folder in my server with several fonts (myserver.com/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.

Upvotes: 5

Views: 9840

Answers (3)

herrstrietzel
herrstrietzel

Reputation: 17334

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.com/s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2"
    },
    {
      // Anton  as replacement
      "font-family": "Anton",
      "font-style": "normal",
      "font-weight": 400,
      src: "https://fonts.gstatic.com/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.

Upvotes: 1

Gautam Parmar
Gautam Parmar

Reputation: 485

https://opentype.js.org 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.com/opentypejs/opentype.js

Upvotes: 0

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

Use CSS font face.

@font-face { font-family: Delicious; src: url('myserver.com/fonts/Delicious-Roman.ttf'); } 
@font-face { font-family: Delicious; font-weight: bold; src: url('myserver.com/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.

Upvotes: 7

Related Questions