Fonts

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.

Jump to:

• Web safe fonts
• Further reading

Web safe fonts

Here is a list of web safe fonts that are generally okay to use.

• Arial
• Brush Script MT
• Comic Sans
• Courier New
• Garamond
• Georgia
• Helvetica
• Impact
• Lucida Console
• Palatino
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Further reading

Further reading:

• https://wp-rocket.me/blog/self-hosting-google-fonts/
• https://kinsta.com/blog/html-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/
• https://systemfontstack.com/