Preload and optimally load local fonts #132
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
runofthemillgeek
force-pushed
the
feat/preload-fonts
branch
from
773591e to
2e87263
Compare
runofthemillgeek
force-pushed
the
feat/preload-fonts
branch
from
2e87263 to
689ba70
Compare
|
Really nice, I'll have a deeper look soon :) |
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.
runofthemillgeek
force-pushed
the
feat/preload-fonts
branch
from
689ba70 to
bc2ea4c
Compare
tomfran
reviewed
Sep 13, 2025
| @@ -0,0 +1,6 @@ | |||
| {{- /* Generate preload tags for all fonts within assets/fonts directory */}} | |||
There was a problem hiding this comment.
This also generates preload tags for theme fonts right? Just to double check.
| @font-face { | ||
| font-family: 'Literata'; | ||
| src: url('/fonts/Literata/Literata-Light.woff2') format('woff2'); | ||
| src: url('/theme-fonts/Literata/Literata-Light.woff2') format('woff2'); |
There was a problem hiding this comment.
If we want to split fonts I would use theme-fonts and user-fonts.
| Typo can preload your local font files if you configure them appropriately. | ||
|
|
||
| 1. Create `assets/themes/fonts` directory within your Hugo site project and copy over your custom fonts into this directory. | ||
| 2. Create `assets/css/fonts.css` file and define [`@font-face` rules](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face) for your custom fonts. You can refer to font paths like `/fonts/some-font-file-name.extension`. |
There was a problem hiding this comment.
Is this correct? assets/css/fonts.css already exists and contains the default fonts definitions. Am I missing something?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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-facerules.Preloading works by adding
<link rel="preload">tags into the head. Additionally, I've inlinedassets/css/fonts.cssinto 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 havingassets/fontsdirectory or overridingassets/css/fonts.cssas they'd all get the default fonts loaded anyway. But, it's fairly straightforward to disable that behavior.