Questions about the fonts

[lesliekirk]

An SEO team working with the store owner has asked a couple of interesting questions regarding the font usage with Colossus.

The first question - Is there a reason why there are 5 backup fonts? They referenced this:

font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

The second question / comment - The browser is giving the warning "The resource https://fonts.googleapis.com/css?fam...splay=optional was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.”

Is it being "preloaded for nothing"? They are wanting to "remove some extraneous requests".

I'm not sure how to respond to these concerns.

[Matt Zimmermann]

Hi Leslie,

The depth of the font stack should not have any impact on SEO as far as I know. They are just that, fallbacks in case the indicated font doesn't load...go on and try the next one. We use a system stack so one of the fallbacks should be there based on the OS.

In a default Colossus installation, we are using preconnect not preload. If this site is set up for preload, then this resource might help: https://www.debugbear.com/blog/rel-preload-problems

[lesliekirk]

Hi Leslie,

The depth of the font stack should not have any impact on SEO as far as I know. They are just that, fallbacks in case the indicated font doesn't load...go on and try the next one. We use a system stack so one of the fallbacks should be there based on the OS.

In a default Colossus installation, we are using preconnect not preload. If this site is set up for preload, then this resource might help: https://www.debugbear.com/blog/rel-preload-problems

Maybe they meant this?

<link href="https://fonts.gstatic.com" data-resource-group="css_list" data-resource-code="preconnect-google-fonts">

I copied it directly from the demo.

[Matt Zimmermann]

Hi Leslie,

Edit that link in the admin to include rel=preconnect and crossorigin with no value. Your output should then look like this:

<link rel="preconnect" crossorigin="" href="https://fonts.gstatic.com" data-resource-group="css_list" data-resource-code="preconnect-google-fonts">

[lesliekirk]

Hi Leslie,

Edit that link in the admin to include rel=preconnect and crossorigin with no value. Your output should then look like this:

<link rel="preconnect" crossorigin="" href="https://fonts.gstatic.com" data-resource-group="css_list" data-resource-code="preconnect-google-fonts">

Will do. Is that going to be one of the changes in Colossus 2.0?

[Matt Zimmermann]

Hi Leslie,

Yes. It was done in Shadows as well.

[lesliekirk]

Hi Leslie,

Edit that link in the admin to include rel=preconnect and crossorigin with no value. Your output should then look like this:

<link rel="preconnect" crossorigin="" href="https://fonts.gstatic.com" data-resource-group="css_list" data-resource-code="preconnect-google-fonts">

Okay, color me stupid. What do I click on in CSS/JavaScript Resources? I can't seem to find what will let me edit that. When I click on Tag Attributes for Resource: preconnect-google-fonts there is nothing there. Or, duh, is that where I add it?

[Matt Zimmermann]

Hey Leslie,

Correct, Colossus doesn't ship with any attribute for this item; you will need to add them.

[lesliekirk]

Another font / CSS question. https://web.dev/font-display/ recommends this:

@font-face { font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
font-display: swap; }

with that I've tweaked this but I do not know what the "local" needs to be:

@font-face {
font-family: 'ReadyTheme Icons';
font-style: normal;
font-weight: normal;
/*font-display: fallback;*/
font-display: swap;
src: url('themes/colossus/ui/css/ReadyThemeIcons.woff') format('woff');
}

[Matt Zimmermann]

Hi Leslie,

Since you are dealing with a custom icon font, there really wouldn't be a "local" resource you could reference. According to the MDN: [ https://developer.mozilla.org/en-US/...CSS/@font-face ]

If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.

By allowing authors to provide their own fonts, @font-face makes it possible to design content without being limited to the so-called "web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available). The ability to specify the name of a locally-installed font to look for and use makes it possible to customize the font beyond the basics while making it possible to do so without relying on an Internet connection.

It's common to use both url() and local() together, so that the user's installed copy of the font is used if available, falling back to downloading a copy of the font if it's not found on the user's device.

[lesliekirk]

Hi Leslie,

Since you are dealing with a custom icon font, there really wouldn't be a "local" resource you could reference. According to the MDN: [ https://developer.mozilla.org/en-US/...CSS/@font-face ]

Okay thanks for the reference. Sorry, I've been trying to reply back to SEO folks wanting this done.

[lesliekirk]

An SEO team working with the store owner has asked a couple of interesting questions regarding the font usage with Colossus.

The second question / comment - The browser is giving the warning "The resource https://fonts.googleapis.com/css?fam...splay=optional was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.”

Is it being "preloaded for nothing"? They are wanting to "remove some extraneous requests".

I need to circle back on this because the SEO team that is working with this particular store is still concerned with this "Poppins" and "Roboto" font issue

"all the different fonts that get loaded are causing render blocking issues"

I did make the recommend tweak

<link rel="preconnect" crossorigin href="https://fonts.gstatic.com" data-resource-group="css_list" data-resource-code="preconnect-google-fonts" /><link rel="stylesheet" as="font" href="https://fonts.googleapis.com/css?family=Poppins:300,400,600,700|Roboto:400i&amp ;display=optional" data-resource-group="css_list" data-resource-code="google-fonts" />

Should I try using "prefetch?