Search code examples
csswebfontspagespeedgoogle-webfontsgoogle-pagespeed

Non-JS solutions to asynchronously load Google Fonts


I'm aware that one way to asynchronously/non-blockingly load a Google Font is to use their JavaScript Web Font Loader. However, are their any non-JS (preferably HTML/CSS) solutions?

One non-JS way is to add lazyload at the end of tag used to import the Google Font. However this attribute isn't universally supported (far from it). So can we do better than that?

If there's no way around this other than using the JS solution, I'll accept that as an answer too.


Solution

  • I think this comment by soren121 on a related question pretty much sums it up:

    The "lazyload" attribute comes from an abandoned W3C proposal, and it was only implemented by Internet Explorer and Edge. I would not recommend using it on a public website. To asynchronously load Google Fonts in all browsers, you should use Their JavaScript Web Font Loader.

    And I too can say, there is no way to load fonts asynchronously without using JavaScript.