feat: custom fonts with preloading #209
Conversation
Part of #87. # To do - [ ] add docs (assets/fonts/README.md?) - [ ] use swap with Fontaine?
Deploying head-start with
|
| Latest commit: |
42e0685
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://44cda987.head-start.pages.dev |
| Branch Preview URL: | https://feat-87-custom-fonts.head-start.pages.dev |
| }, | ||
| ]; | ||
|
|
||
| export const getFontCss = (font: Font) => { |
There was a problem hiding this comment.
Note: import raw (import archivo400css from '@fontsource/archivo/latin-400.css?raw';) is not an option as it results in font urls starting with ./files/... that are not resolved. So instead we generate the font declaration ourselves with the url that is resolved correctly in production.
Note 2: I've left out font-display: swap; as we don't have a fallback yet that doesn't cause a layout shift. See to do on Fontaine and font swap.
There was a problem hiding this comment.
Using fontaine seems a bit involved. Rather keep this PR small and merge this first, to add font swap as perf enhancement in a separate PR.
| @@ -1,7 +1,22 @@ | |||
| --- | |||
There was a problem hiding this comment.
Add tests for this file?
There was a problem hiding this comment.
That also triggers the question if the fonts and preConnectOrigins should be passed as props?
Changes
Note: based on #208 so the
<PerfHead>could easily be extended.Associated issue
Resolves #87
How to test
Checklist
I have made updated relevant documentation files (in project README, docs/, etc)created follow-up issue Document assets setup #210I have added a decision log entry if the change affects the architecture or changes a significant technology