typo icon indicating copy to clipboard operation
typo copied to clipboard

Preload and optimally load local fonts

Open runofthemillgeek opened this issue 7 months ago • 1 comments

Adds template actions that will preload any local fonts used in the consuming Hugo project if present. Otherwise, will preload and use the default Typo fonts (Liberata, Monaspace).

In order to make this work while preserving theme fonts, I had to move the theme fonts into /assets/theme-fonts. If the user decides to add custom fonts into assets/fonts, then those will be preloaded and theme-fonts will not be preloaded. User will also have to create an override for assets/css/fonts.css with their own @font-face rules.

Preloading works by adding <link rel="preload"> tags into the head. Additionally, I've inlined assets/css/fonts.css into a <style> tag to help it get define/loaded earlier and not wait for the rest of the page CSS to load and render. This should hopefully improve perceived performance a bit on slower networks.

Wiki has been updated to include instructions on how to add custom fonts and use them with Typo.

Can be previewed at https://automagic.blog and the relevant changes I had to make at https://github.com/runofthemillgeek/typomagic.

NOTE: This can adversely impact users who might anyway be doing manual rel="preload"s without having assets/fonts directory or overriding assets/css/fonts.css as they'd all get the default fonts loaded anyway. But, it's fairly straightforward to disable that behavior.

runofthemillgeek avatar Apr 28 '25 23:04 runofthemillgeek

Really nice, I'll have a deeper look soon :)

tomfran avatar Apr 29 '25 20:04 tomfran