Custom Fonts

[jbmoelker]

User story

As a web designer, I want to use custom fonts in my designs, so that projects are on brand and can have their own style.

As a website visitor, I want text to be well formatted without content shifts, so that its easy to directly scan and read the text.

As a web developer, I want custom fonts to be straightforward to add and load well, so that its easy for me to implement custom fonts.

Questions and considerations

• Head Start is a starterkit for projects. Those projects have their own designs and custom fonts. So we could leave implementing custom fonts entirely to those projects. Or should we provide a default / reference setup that can easily be tweaked or removed?

System design

• [ ] Use / enforce modern font formats for custom fonts (woff2)
• [ ] Register custom font globally or inline raw as critical CSS
• [ ] Preload custom fonts correctly (crossorigin) so that they render quickly
• [ ] Use a well-formatted fallback font (references: manually using font-face-matcher; automatically using Fontaine in Astro Vite config, prefer that over unmaintained astro-fontaine plugin)
• [ ] Consider Fontsource to make it easier to use open source custom fonts as 1st party assets

[jbmoelker]

Consider this package? https://www.launchfa.st/features/astro-font Update: doesn't support fontaine or inlining as critical CSS. So better to roll our own.