LibWeb: Defer loading CSS font until glyph is actually requested
Given this test page:
<style>
@font-face {
font-family: MyCoolTestFont;
src: url('first.ttf');
unicode-range: u+0041;
}
@font-face {
font-family: MyCoolTestFont;
src: url('second.ttf');
unicode-range: u+0042;
}
body {
font-family: MyCoolTestFont;
}
</style><body>BWe should only ever load second.ttf since only the B glyph is used (u+0042).
At the moment, we will fire off network loads for both first.ttf and second.ttf.
This gets very wasteful for websites that use libraries like FontAwesome to load a handful of glyphs, since we end up loading the entire set of FontAwesome font files.
An example is https://utah.edu/ which loads all of the following from FontAwesome:
290406.810 WebContent(1536158): ResourceLoader: Starting load of: "https://static.juicer.io/fonts/fontawesome-5-juicer.woff2?83361522"
290407.666 WebContent(1536158): ResourceLoader: Finished load of: "https://static.juicer.io/fonts/fontawesome-5-juicer.woff2?83361522", Duration: 857ms
290409.502 WebContent(1536158): ResourceLoader: Starting load of: "https://static.juicer.io/fonts/fontawesome-5-juicer.woff2?83361522"
290409.974 WebContent(1536158): ResourceLoader: Finished load of: "https://static.juicer.io/fonts/fontawesome-5-juicer.woff2?83361522", Duration: 473ms
290411.718 WebContent(1536158): ResourceLoader: Starting load of: "https://static.juicer.io/fonts/fontawesome-5-juicer.woff2?83361522"
290411.854 WebContent(1536158): ResourceLoader: Finished load of: "https://static.juicer.io/fonts/fontawesome-5-juicer.woff2?83361522", Duration: 137ms
290412.362 WebContent(1536158): ResourceLoader: Starting load of: "https://static.juicer.io/fonts/fontawesome-5-juicer.woff2?83361522"
290413.218 WebContent(1536158): ResourceLoader: Finished load of: "https://static.juicer.io/fonts/fontawesome-5-juicer.woff2?83361522", Duration: 857ms
290414.070 WebContent(1536158): ResourceLoader: Starting load of: "https://kit.fontawesome.com/7f2d2895bd.js"
290414.302 WebContent(1536158): ResourceLoader: Finished load of: "https://kit.fontawesome.com/7f2d2895bd.js", Duration: 233ms
290414.506 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/css/pro.min.css?token=7f2d2895bd"
290414.506 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/css/pro-v4-shims.min.css?token=7f2d2895bd"
290414.510 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/css/pro-v5-font-face.min.css?token=7f2d2895bd"
290414.510 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/css/pro-v4-font-face.min.css?token=7f2d2895bd"
290414.510 WebContent(1536158): ResourceLoader: Starting load of: "https://kit.fontawesome.com/7f2d2895bd/75936263/kit-upload.css"
290414.918 WebContent(1536158): ResourceLoader: Finished load of: "https://kit.fontawesome.com/7f2d2895bd/75936263/kit-upload.css", Duration: 409ms
290414.938 WebContent(1536158): ResourceLoader: Finished load of: "https://ka-p.fontawesome.com/releases/v6.5.2/css/pro-v5-font-face.min.css?token=7f2d2895bd", Duration: 429ms
290414.982 WebContent(1536158): ResourceLoader: Finished load of: "https://ka-p.fontawesome.com/releases/v6.5.2/css/pro-v4-font-face.min.css?token=7f2d2895bd", Duration: 473ms
290415.366 WebContent(1536158): ResourceLoader: Finished load of: "https://ka-p.fontawesome.com/releases/v6.5.2/css/pro.min.css?token=7f2d2895bd", Duration: 861ms
290415.518 WebContent(1536158): ResourceLoader: Finished load of: "https://ka-p.fontawesome.com/releases/v6.5.2/css/pro-v4-shims.min.css?token=7f2d2895bd", Duration: 1013ms
290415.714 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-22.woff2"
290415.714 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-21.woff2"
290415.714 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-20.woff2"
290415.714 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-19.woff2"
290415.714 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-18.woff2"
290415.714 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-17.woff2"
290415.714 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-16.woff2"
290415.714 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-15.woff2"
290415.718 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-14.woff2"
290415.718 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-13.woff2"
290415.718 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-12.woff2"
290415.718 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-11.woff2"
290415.718 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-10.woff2"
290415.718 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-9.woff2"
290415.718 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-8.woff2"
290415.718 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-7.woff2"
290415.718 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-6.woff2"
290415.718 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-5.woff2"
290415.718 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-4.woff2"
290415.718 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-3.woff2"
290415.718 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-2.woff2"
290415.718 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-1.woff2"
290415.718 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-regular-400-0.woff2"
290415.722 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-22.woff2"
290415.722 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-21.woff2"
290415.722 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-20.woff2"
290415.722 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-19.woff2"
290415.722 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-18.woff2"
290415.722 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-17.woff2"
290415.726 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-16.woff2"
290415.726 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-15.woff2"
290415.726 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-14.woff2"
290415.726 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-13.woff2"
290415.726 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-12.woff2"
290415.726 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-11.woff2"
290415.726 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-10.woff2"
290415.726 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-9.woff2"
290415.726 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-8.woff2"
290415.726 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-7.woff2"
290415.726 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-6.woff2"
290415.726 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-5.woff2"
290415.726 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-4.woff2"
290415.726 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-3.woff2"
290415.726 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-2.woff2"
290415.730 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-1.woff2"
290415.730 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-light-300-0.woff2"
290415.734 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-brands-400-2.woff2"
290415.734 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-brands-400-1.woff2"
290415.734 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-brands-400-0.woff2"
290415.734 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-22.woff2"
290415.734 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-21.woff2"
290415.734 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-20.woff2"
290415.734 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-19.woff2"
290415.734 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-18.woff2"
290415.738 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-17.woff2"
290415.738 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-16.woff2"
290415.738 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-15.woff2"
290415.738 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-14.woff2"
290415.738 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-13.woff2"
290415.738 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-12.woff2"
290415.738 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-11.woff2"
290415.738 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-10.woff2"
290415.738 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-9.woff2"
290415.738 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-8.woff2"
290415.738 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-7.woff2"
290415.738 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-6.woff2"
290415.738 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-5.woff2"
290415.738 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-4.woff2"
290415.742 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-3.woff2"
290415.742 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-2.woff2"
290415.742 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-1.woff2"
290415.742 WebContent(1536158): ResourceLoader: Starting load of: "https://ka-p.fontawesome.com/releases/v6.5.2/webfonts/pro-fa-solid-900-0.woff2"
Firefox only loads 14 of the above files for the same URL. 😅
SerenityOS / serenity
The Serenity Operating System 🐞
30.6k
Contributors get 100% of received funds after fees
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too