Learn about fonts for your site below.
Jump to:
System fonts
Our default setup in the Feast Plugin uses System Fonts, which is the same font your device (desktop, tablet or phone) uses for all its settings. System fonts are:
- the most optimized for pagespeed because they're built directly into the operating system of the device
- are designed for maximum readability, which is important for accessibility
- are familiar to your readers, which is a good user experience
System fonts are the gold standard for the web, but based on feedback that users want more font options to help their sites stand out, we've introduced web safe fonts.
Web safe fonts
Websafe fonts are fonts that come pre-installed on the most popular computers, tablets and phones. They make it most likely that your site will show up as intended, with the correct fonts, on the most devices.
Here is a list of web safe fonts that are generally safe to use:
- Arial
- Baskerville
- Book Antiqua
- Calibri
- Cambria
- Century Gothic
- Constantia
- Courier New
- Franklin Gothic
- Futura
- Garamond
- Georgia
- Gill Sans
- Lucida Bright
- Palatino
- System Default
- Tahoma
- Times New Roman
- Trebuchet
- Verdana
These websafe fonts are available in the Feast Plugin version 11.3.0+:
Make sure that the System Font Stack is enabled, as a requirement for the websafe fonts.
Note: if you're not seeing the updated fonts on your site (including desktop vs mobile), you need to clear your caches.
Beyond system and websafe fonts, there are custom fonts, such as those offered by Google and other third parties
Risks with custom fonts
Custom fonts (AKA Google Fonts) may or may not be designed for legibility, accessibility, built to standards for cap units, and more. Below are some of the problems and risks we've seen with custom fonts:
- CLS (inconsistent ligature sizes, letter spacing, questionable font-display recommendations)
- Font weights (bold, italic, etc) are not universally supported across all fonts
- Pagespeed (external header calls, rendering)
- Accessibility (font size, color, and how readable a font is in sub-optimal conditions on a phone)
- Uncertainty around whether to externally host or self-host
- Lack of support for fractions (important for recipe sites)
Supporting custom fonts in a way that isn't only concerned with visuals, but accommodates pagespeed, CLS, accessibility and maintains branding consistency, requires a developer to manually review and implement on a site-by-site basis.
If you're in the EU, you'll want to do your own research on whether custom fonts comply with GDPR regulations.
Custom fonts
Because of the risks and additional support costs associated with custom fonts, we've built support for them into Feast+, which gives you:
- font adjustments to prevent CLS
- automatic adjustments for font weight
- only load specific font subsets to maintain a lean site, instead of loading an entire, bloated font family
- ensured support for fractions
- recommended font pairs for seamless branding
Feast+ also automatically ensures a sufficient contrast between text , hyperlinks and background colors, so that your site remains readable and accessibility compliant.
Pagespeed
As we noted above, custom fonts introduce potential for pagespeed issues, and opting to use custom fonts will negatively impact your pagespeed to different extents.
Whether this is an issue for your specific site will depend on what other plugins, javascript and styling your site uses. Each site is different.
WordPress font library
The WordPress font library was introduced in WordPress 6.5, and like all new WordPress feature, is unstable and not ready for use on live sites. Further testing is needed to verify:
- fonts are cleaned up when not in use to prevent thousands of font files from accumulating on the server
- proper security on the font folder on hosts to prevent hacks
- proper permissions on font folders on hosts to allow legitimate font hosting
See the OMGF post on the WordPress font library.
We'll be continuing to monitor and test the font library and when it becomes stable, we'll integrate support for it.
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/
- https://webflow.com/blog/web-safe-fonts
Leave a Reply