1

I have just find out about this script, when trying to increase my page-speed.

Currently I'm loading about 3 Google Web Fonts in the HEAD, and it decreases my page speed since it's a "Render blocking element".

So I read about this script here

And Just added script inside the BODY tag (but and before loading jquery script, as I figure it will be faster that way)

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6/webfont.js"></script>
<script>
 WebFont.load({
    google: {
      families: ['Source Sans Pro:400,600,700,400italic,700italic', 'Roboto Condensed:400,700']
    }
  });
</script>

And that's it, my page speed increase.

So I'm just wondering, are there any disadvantages for using this method?

P.S, I think version 1.6 is the latest on google. I saw there's some github library for it, but no clue if I should and how to use it.

3
  • 1
    The main disadvantage is that the page may load without the webfont first, then apply the webfont when it's loaded asynchronously. This may cause text to jump around and be confusing to the user.
    – ceejayoz
    Commented Apr 30, 2017 at 12:55
  • so I should try to choose fallback font that are closest in their size to my Google fonts? which fonts do all users have? for example, what looks closests to source-sans pro in its dimensions?
    – rockyraw
    Commented Apr 30, 2017 at 13:05
  • Yeah, you could do that. Relatively safe font stacks: w3schools.com/cssref/css_websafe_fonts.asp
    – ceejayoz
    Commented Apr 30, 2017 at 13:28

2 Answers 2

2

One disadvantage with webfont.js based font-loading is that the font files for fonts shall be downloaded even if the browser doesn't need them to render the pages. This is unlike how the font-file download would be handled if you would use the regular approach:

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Sans Pro:400,600,700,400italic,700italic|Roboto Condensed:400,700" />
0

The main disadvantage of the Google Web Font Loader is the inability to get the best use out of it when the JavaScript in the browser is disabled. Web font loader is also a JavaScript. Therefore it will not run if the JavaScript is disabled.

3
  • 3
    we can use noscript tag for loading the fonts if the browser does not support javascript
    – abdullacm
    Commented Aug 20, 2018 at 10:10
  • 2
    Do a lot of commercial websites in 2019 not use JS? Commented Aug 3, 2019 at 19:56
  • @AlfredWallace The post is from 2018
    – Gherman
    Commented Jul 16, 2020 at 12:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.