Skip to content

Dynamically load google fonts after page has loaded

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') +
        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?



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

You can load whatever font you want dynamically:

 <script src=""></script> 
                    google: { 
                           families: ['Droid Sans', 'Droid Serif'] 
User contributions licensed under: CC BY-SA
10 People found this is helpful