Custom fonts are a disaster in 2021, with issues relating to:
- CLS (inconsistent ligature sizes, letter spacing, questionable font-display recommendations)
- Font weights (bold, italic, etc)
- Pagespeed (external header calls, rendering)
- Accessibility (font size, color, and how readable a font is in non-optimal conditions on a phone)
- Uncertainty around whether to externally host or self-host
Currently, we recommend simply disabling Google Fonts via the Feast Plugin. We'll be releasing an update through the Feast Plugin to fall back to websafe fonts, and eventually revisit custom fonts if Google release updated guidelines with the May pagespeed update.
Supporting custom fonts in a way that isn't simply visual but accommodates pagespeed, CLS, accessibility and maintains branding consistency simply requires a developer to manually implement on a site-by-site basis.
Further reading:
- https://wp-rocket.me/blog/self-hosting-google-fonts/
- https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization
- https://dev.to/kelli/how-to-self-host-google-fonts-on-your-own-server-d4i
- https://opensource.com/article/19/3/webfonts
- https://css-tricks.com/google-fonts-and-font-display/
- https://developers.google.com/web/updates/2016/02/font-display
- https://www.industrialempathy.com/posts/high-performance-web-font-loading/
Leave a Reply