1

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.

Hassan Baig
  • 15,055
  • 27
  • 102
  • 205

1 Answers1

2

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.

Sainan
  • 1,274
  • 2
  • 19
  • 32
  • I'm dealing with a web app where an unignorable chunk of users don't have JS (because of originating from a JS-stripping forward proxy). I wanted a robust workaround. Too bad there's nothing else. – Hassan Baig Sep 21 '17 at 23:51
  • @HassanBaig I wish I would give you a workaround, but effective caching would make font loading fast after the user's first visit and moving the link to the end of the body would prevent render blocking. – Sainan Sep 21 '17 at 23:54
  • As in, I should move the `` tag to the end of the body? If that effectively prevents render blocking, in what sense does this 'solution' fall behind the JS implementation of the Web Font Loader? Secondly I'm guessing static assets get cached by browsers anyway, so I haven't taken any special measures to cache the font. In case I were to though, what kind of measures should I take to ensure effective caching? – Hassan Baig Sep 21 '17 at 23:58
  • @HassanBaig Yes, if you move the `` tag to the end of your body the font will be loaded once the body is already rendered, but that will cause the body to be rendered with one font first and then with another. `ETag` and `Last-Modified` should be sent automatically by your server software for these kinds of assets, but since you mentioned your website is behind a reverse proxy, maybe you could tell it to cache as well if it doesn't already. – Sainan Sep 22 '17 at 00:00
  • Hmm, so essentially I should set these up in my nginx virtual host file (probably the `location` block related to static assets). – Hassan Baig Sep 22 '17 at 21:50
  • @HassanBaig Sure, just make sure nginx sends Etag and/or Last-Modified for these static resources. – Sainan Sep 23 '17 at 10:33