Answers to how and why certain elements are set up.
Contrast
We use a formula to determine the largest contrast between any given color - whether primary, accent or background - and white or black.
- If white provides more of a contrast, it's used as the text and hyperlink color
- If black provides more of a contrast, it's used as the text and hyperlink color
This uses the same formula as services like wave.webaim.org, which saves you from having to check it yourself.
Table of Contents
The table of contents automatically has the background and accessibility-compliant foreground color applied to it.
Underlines are removed from the table of contents because the expected behavior is that the entire contents are clickable/links, which means that the text does not need to stand out from the rest.
Fonts
While you can technically add any Google Font in the fonts section, they won't all work. We've defined a specific subset of fonts that we've tested to ensure:
- they load quickly
- they don't cause CLS
- they have the correct font weights (eg. boldness)
Font weights
Many fonts have up to 9 different boldness options, defined in increments of 100 through 900. There's also italic variations for some, but not all, weights.
We've considered adding the ability to specify your own font weights so that other fonts can be used, but it's impossible for us to test every font weight for every font to make sure it's safe for CLS. It also adds a huge technical burden to you to understand how to check which weight is needed.
Trying to load a font weight at 800, which doesn't have 800 as an option, means the font simply doesn't load at all.
Font pagespeed
We thought about maybe building a list of all font weights for a certain subset of fonts, but loading them all would cause pagespeed problems, and the majority of those weights would never be used.
And that doesn't even account for things like italics, which are often not available for every font weight (or at all).
Because of all this, we're sticking with 2 font options: 1 for the body, 1 for the heading.
- the body font gets loaded at font weight 400 (normal) and 800 (bold)
- the heading font gets loaded at font weight 800 (bold)
We've tediously checked our font recommendations in the getting started guide, including fractions for the body fonts, to minimize your potential complications.
We've also spent considerable time pairing the fonts together to make sure they work cohesively, from an aesthetic standpoint.
Note: Google is working on some CSS specifications to allow better control over fonts to better control font widths and heights but this is years off being usable.
Custom fonts
If you're able to:
- understand how to load fonts
- choose the appropriate weight
- control it with CSS
- check for fractions
- check for CLS
- monitor and respond to changes over time (eg. Google removing the font, or font weight)
Then you can opt to not use our font setup and do it yourself.
Google Fonts GDPR
Loading fonts from Google (as implemented by Feast+, and any non-custom-theme) is a violation of GDPR.
Whether this matters to you or not is a discussion you'd have to have with your lawyer. Anything you read online about this is worthless.
If you want to reduce your Google-font-specific exposure, you can use the OMGF plugin to automatically download and cache fonts on your server. The plugin has good documentation and tends to work well.
Any issues you run into with this will need to be addressed with the plugin developer, your host, or NerdPress.
Most notably, OMGF caches fonts fairly aggressively which means that new fonts you set won't be displayed until the font cache has been cleared.