Dynamically load google fonts after page has loaded

Question

I would like to be able to have the user select which font they would like the page to be displayed in. Here is the way that Google recommends you do it using JavaScript.

WebFontConfig = {
    google: {
        families: ['Tangerine', 'Cantarell']
    }
};

(function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();

How can I modify this so that I can re-get fonts after the page has loaded?

score 40 · Accepted Answer · answered May 14 '13 at 22:10

40

Check out the WebFont.load command in this github repo:

https://github.com/typekit/webfontloader

You can load whatever font you want dynamically:

 <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> 
  <script> 
        WebFont.load({
                    google: { 
                           families: ['Droid Sans', 'Droid Serif'] 
                     } 
         }); 
   </script>

answered May 14 '13 at 22:10

mccannf

16,619
3
51
63

4

Be sure to use a specific version in production. Else there will be no caching. – sanmai Oct 31 '14 at 09:24
@sanmai: thats not true...there is caching on the latest version for up to 1 year. I think the issue is more that a buggy release will break your site. – DD. Oct 13 '16 at 11:09
1

@DD. just checked to see that you're right; currently for the [version 1 as above in the post](http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js) Google gives `Expires` header for a year ahead; previously this wasn't the case – sanmai Oct 14 '16 at 05:30

Pierre · Answer 2 · 2021-01-27T10:37:02.863

Or if you don't want third party libs :

function addStylesheetURL(url) {
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = url;
  document.getElementsByTagName('head')[0].appendChild(link);
}

// Load Tangerine & Cantarell
addStylesheetURL('https://fonts.googleapis.com/css2?family=Cantarell&family=Tangerine&display=swap');

    h1 {
      font-family: 'Cantarell', sans-serif;
    }
    p {
      font-family: 'Tangerine', cursive;
      font-size: 30px;
    }

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamically load google fonts after page has loaded</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
  </head>
  <body>
    <h1>Dynamically load google fonts after page has loaded</h1>
    <p>Some text.</p>
  </body>
</html>

score 2 · Answer 3 · answered Mar 21 '22 at 04:10

// Load font:

  const fontName = 'Roboto';
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = `https://fonts.googleapis.com/css?family=${fontName}`;
  document.head.appendChild(link);

// Set font on body element with Javascript:

  document.body.style.fontFamily = fontName;

Dynamically load google fonts after page has loaded

3 Answers3

Linked