Add an option to preload fonts using rel=preload

[gajus]

ūsus can parse the CSS, find the fonts used, and preload the fonts using rel=preload.

<link rel="preload" href="/assets/myfont.woff" as="font">

There can be two options:

• remove font loading from extracted CSS altogether (because some don't consider it part of the critical path);
• remove font loading from the extracted CSS and add rel=preload to HTML

Idea thanks to https://github.com/gajus/usus/issues/20 and https://github.com/gajus/usus/issues/8 discussions.

[gajus]

This is probably less valuable feature than I thought of it at first. The problem is that fonts are browser dependent. Inlining font preload strategy using ūsus is only going to benefit Google Chrome clients (and other browsers that support the same set of fonts).

[davidhund]

This goes for preloading (fonts) in general. Also: modern browsers are moving toward full .woff2 support and browsers that (will) support preloading will most probably also support .woff2.

How about restricting this option to only (search-for-and-preload .woff2?

[gajus]

Does it have benefits over simply hardcoding pre-loading of the fonts into the HTML?

[davidhund]

"[…] hardcoding preloading in the HTML" — I'm not sure I follow?

The benefit of usus doing it is that it saves developer from thinking about it. The benefit of browsers using preload hints is that browsers are very smart about preloading (as opposed to developer-JS-hacks-to-preload-stuff)

But I might not understand your Q?

[gajus]

The benefit of usus doing it is that it saves developer from thinking about it.

Right. Lets add it. :-)

[gajus]

Okay then. Learned the hard-way why inlining is not a smart idea.

uniform_bold-7cd51481fb1a3d9b6aaff18f58225d60.woff2
roboto_regular-080c52675a25ba31eae918c157be7a43.woff2
roboto_medium-434bb9e29238f527d00d3a94690c6d07.woff2

At least in my case, fonts (and other static assets) include hash as part of the name. Inlining that would require changing the server to able to access the asset names.

Working on this now.

[gajus]

This is a bit more complicated than I thought it is going to be. Take this as an example.

<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
  font-family: 'Open Sans', sans-serif;
}
</style>

Should fonts be pre-loaded in this case as well?

The actual font URL will be something like https://fonts.gstatic.com/s/opensans/v14/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2.

Assuming that https://fonts.googleapis.com/css?family=Open+Sans is geo-location optimized (linking different font based on the client IP), this might result in loading the same font multiple times from different URLs.

[david-trejo-ck]

Personally, I don't care about fonts, they are big and make the page slower.

[gajus]

🎉

@david-trejo-ck You can opt-out of the feature using --preloadFonts false.