General Notes (Feast+)

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.

Hyperlinks on feature styles

In cases where your feature style (and Advanced Jump To) has a background that would not be accessibility compliant with your hyperlink color, we automatically override the hyperlink color with the appropriate white or black contrast (see above).

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.

Feast Fonts

You can install the Feast Fonts Plugin to host our recommended Google Fonts locally on your site, which should improve pagespeed and avoid the GDPR issues below.

Note that this only impacts the Feast setup and not any third party scripts or plugins.

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.

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.

OMGF also has special requires for translations.

Pagespeed

Pagespeed is a cumulative effect of many, many different things on your page. Any one individual issue isn't a problem, but compounding each one can lead to failing pagespeed scores and CWV (Core Web Vitals).

You may be barely passing CWV before setting up Feast+, and start to fail after implementing it. This is because the compounding affect of:

• javascript
• ads
• DOM nodes
• poor server speed
• incorrect caching
• user location
• user device
• image optimization

And on top of that, making your website more visually appealing with styling can push a page over the threshold from passing to failing. But the styling alone isn't the cause of the problem.

Very often you need to go and re-visit all of the issues listed above and tweak, optimize and remove things in order to once again pass CWV.