Dynamically Load fonts

Question

I need around 150 fonts for my project. Loading all the fonts initially increases the page load time.

I tried googling but could not find an answer.

Scenario:

User will select a font option from <select> tag. and upon click, I have to retrieve the font dynamically and make sure the font is rendered by the browser and then use the font to avoid a Flash of Unstyled Text (FOUT)

Currently I am using AJAX to request that font file

      $.ajax({
      type: 'GET',
        url: "font-file-url",
        async:false,
        success: function(data) {
            $("style").prepend("@font-face {\n" +
            "\tfont-family: \""+fontValue+"\";\n" + 
            "\tsrc: local('☺'), url("font-file-url") format('opentype');\n" + 
            "}");
         }
      });

Problem

I dont know when exactly the font is being rendered by the browser, so I end up displaying FOUT

https://usefulangle.com/post/74/javascript-dynamic-font-loading — Sunil Kumar, May 27 '20 at 11:54

score 13 · Accepted Answer · answered Jun 29 '17 at 10:49

May be a bit late, but I accomplished it using Google's WebfontLoader Library. It did the job for me.

This is how I implemented:

Step 1: Include the JS file of the library

Step 2: The below code did the trick for me

WebFont.load({
google: {
  families: ['Droid Sans']
},
timeout:5000,
fontactive: function(familyName,fvd){ //This is called once font has been rendered in browser
    // Your business logic goes here

  },
});

You can also load custom fonts apart from google fonts. Library also provides various callback functions and other cool stuffs. You can check out the above link.

score 10 · Answer 2 · answered Mar 19 '22 at 09:11

You can use the native Font Loading API, a 3rd party package is no longer needed. Here is a working example:

document.getElementsByTagName('button')[0].onclick = async function() {

  const myFont = new FontFace('Pacifico', 'url(https://fonts.gstatic.com/s/pacifico/v21/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)');
  await myFont.load();
  document.fonts.add(myFont);

  document.getElementsByTagName('h1')[0].style.fontFamily = "Pacifico";
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <h1>Hello world!</h1>
  <button>Dynamically load font</button>
</body>

</html>

score 2 · Answer 3 · answered Feb 08 '17 at 01:39

2

Unfortunately loading a font is not supported 100% by JavaScript. but there is a work about this to support it in future:

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API https://drafts.csswg.org/css-font-loading/

answered Feb 08 '17 at 01:39

H Aßdøµ

2,925
4
26
37

score 2 · Answer 4 · answered Jul 20 '20 at 07:26

2

You can now use the Font Loading API to detect when all fonts have been loaded. This should work in most modern browsers.

// Wait until all fonts are loaded:
document.fonts.ready.then(() => init());

answered Jul 20 '20 at 07:26

CrazyTim

6,695
6
34
55

score 0 · Answer 5 · answered Oct 11 '22 at 11:32

Created function by comment above. This function returns a promise.

function loadFont(name, url, weight) {
  return new Promise((resolve, reject) => {
    const myFont = new FontFace(name, `url(${url})`);
    myFont.weight = weight;
    myFont
      .load()
      .then(() => {
        document.fonts.add(myFont);
        const el = document.createElement("DIV");
        el.style.fontFamily = name;
        resolve();
      })
      .catch(() => reject());
  });
}
loadFont('Ubuntu', 'https://fonts.cdnfonts.com/s/13098/Ubuntu-B.woff', 700).then(() => {
  alert('font loaded!');
});

<div style="font-family: 'Ubuntu'; font-weight: bold">
  Please check Network in devTools
</div>

Dynamically Load fonts

5 Answers5