Trying to Preload optional fonts

[ids]

I must be missing something simple?

LightHOUSE(!)

Fonts with font-display: optional are not preloaded

informs me I should preload "optional fonts. So, I added the preload as font attributes.

<link rel="preconnect" href="//www.google-analytics.com" data-resource-group="css_list" data-resource-code="preconnect-google-analytics" />
<link rel="preload" as="font" href="https://fonts.gstatic.com" data-resource-group="css_list" data-resource-code="preconnect-google-fonts" />
<link rel="stylesheet" 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" />
<link media="all" rel="stylesheet" type="text/css" href="https://www.domain.com/mm5/json.mvc?Store_Code=epx&amp;Function=CSSCombinedRe source_Output&amp;CSSCombinedResource_Code=stylesh eet&T=3001b9cb" data-resource-group="css_list" data-resource-code="stylesheet" />

Is there a data attribute missing? Or maybe I need to also add a type attribute with a specific font?

( I might be missing the days of ugly fonts. So, thanks to whoever for this rot. )
( Did I say that out loud? )

Scott

[Matt Zimmermann]

Hi Scott,

I haven't had a lot of success with preloading fonts...yet. However, in Shadows, I use preconnect like the following:

<link rel="preconnect" crossorigin href="//www.google-analytics.com"></link>
<link rel="preconnect" crossorigin href="https://fonts.gstatic.com"></link>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:400,500,700"></link>

[ids]

For reference, The code I posted is nearly stock Colossus, except for adding the preload value.

Changing the rel value to preconnect didn't help the lighthouse report.

NOTE: when adding the crossorigin attribute, it isn't intuitive that you need to physically enter a "space" into the value field. Not doing this means you get an error when attempting to save the tag attribute. Further, the attribute then reads crossorigin=" ", which looks weird or wrong. But, the attribute does appear to render properly.

Scott

[Matt Zimmermann]

Hi Scott,

You should be able to define the REL without a value; I'm not sure why you are being forced to add a space.

According to Google, their advice is for you to host your own web fonts because Google fonts are updated pretty frequently, and can expire at any time. However, if you want to preload from Google fonts, you might try this route:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Poppins:300,400,600,700|Roboto:400i&amp ;display=optional">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,600,700|Roboto:400i&amp ;display=optional">

[ids]

Yes, not sure why I needed to add a space in the value field for the attribute "crossorigin." That's why I mentioned it, in the case it's a bug.

I'll give this new version a try.

Scott

[Matt Zimmermann]

Hi Scott,

Is the site on the latest version of Miva? I've tested valueless attributes, like defer, and have no problem when there isn't a value.

[ids]

Yes, latest version. I'll try again though, if I can reproduce it.

Scott

UPDATE: I could NOT reproduce. I may have had a fat finger somehow.

[ids]

No joy on using the preload as style. I'm thinking there is some other thing affecting this or the optional font needs to be specific, or local as you mentioned.

Scott