typo
typo copied to clipboard
Preload and optimally load local fonts
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.
Really nice, I'll have a deeper look soon :)