'Dynamically Load fonts

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

javascripthtmlcssfontswebfont-loader


Solution 1:[1]

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.

Solution 2:[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/

Solution 3:[3]

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());

Solution 4:[4]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Abhinav
Solution 2 H Aßdøµ
Solution 3 CrazyTim
Solution 4 user9408899

Related Questions