Dynamically load google fonts after page has loaded

Asked 14/5, 2013 at 21:41 Answered 21/3, 2022 at 4:10

Solved javascript jquery css font-face google-font-api

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?

Perez answered 14/5, 2013 at 21:41 Comment(0)

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>

Broucek answered 14/5, 2013 at 22:10 Comment(3)

Be sure to use a specific version in production. Else there will be no caching. – Stenopetalous 31/10, 2014 at 9: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. – Ricciardi 13/10, 2016 at 11:9

@Ricciardi just checked to see that you're right; currently for the version 1 as above in the post Google gives Expires header for a year ahead; previously this wasn't the case – Stenopetalous 14/10, 2016 at 5:30

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>

Botnick answered 27/1, 2021 at 10:22 Comment(0)

// 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;

Supervene answered 21/3, 2022 at 4:10 Comment(0)

Recommended topics

Hot tags