Limit the render blocking effect of Google Fonts
Improve page speed and user experience by reconfiguring Google Fonts to load asynchronously in the background.
The normal CSS reference to add one or more Google fonts - for example the regular and bold variants of Roboto - looks like this:
To load the same resource in the background while the page continues loading, use this simple asynchronous CSS technique with the
media attribute, plus some additions to manage loading priority and include a no-JS fallback:
Of the 4 parts included above, 3 are optional depending on the context:
preconnectto the domain of the fonts files.
(Optional but recommended. Learn more about resource hints.)
preloadthe font CSS to increase loading priority.
(Optional depending on the relative priority of other resources.)
- Load the font CSS asynchronously and apply to the page when loaded.
- Provide a
(Optional - potentially omitted to reduce resources for non-JS users.)
Placing the CSS reference at the bottom of the HTML has a similar effect, but the technique above starts the loading process sooner, potentially reducing the potential flash of unstyled text.
Questions? Need help?Email Me
Learn more about maximizing website loading speed:Complete Guide