CODEWITHSUNDEEP
javascriptcsshtmlfontspagespeed
AnApprentice
AnApprentice

Reputation: 111030

How to eliminate blocking CSS which is fonts?

I currently am using Google fonts which are included in my <head> tag via Rails application.scss like so:

`@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');`

Google PageSpeed is saying I need to "Eliminate render-blocking JavaScript and CSS in above-the-fold content" When I move the font CSS to the bottom of the page, whenever the page load the entire page jumps.

How can I make Google fonts non-blocking but not have a page that jumps when it finishes loading?

Upvotes: 1

Views: 997

Answers (1)

Ionuț Staicu
Ionuț Staicu

Reputation: 22184

You can read a nice article about this very problem here

The thing is that you won't be able to get rid of that jumping problem (unless the custom font has the exactly same properties as the font being replaced).

And there you have it. If you load the page for the very first time you will see the fallback font immediately, followed by the web font once it loads. Subsequent visits will load the web fonts from cache and show them immediately. It’s the best of both worlds.

So yeah, long story short, you can either have performance or you can avoid FOUC, but not both.

Upvotes: 1

Related Questions