Is there ANY way to achieve good Core Web Vitals scores while using Adobe Fonts?

[thebluelizard]

I'm at my wit's end. I've been trying to improve Core Web Vitals scores for our website (https://georgiaencyclopedia.org) and I've made great progress except for all the performance hits we get from using Adobe Fonts for one of the typefaces (Calluna, the serif).

The sans-serif font is Google Fonts and I have the font files hosted locally which is working great and fast. But I'm getting hit pretty hard regarding CLS and LCP and the issues appear to stem entirely from the time it takes for the webfont to load (and any layout shift from the font loading). The biggest problem seems to be the blocking @Import CSS statement Adobe Fonts relies on, but there doesn't seem to be any way to avoid that.

I've got the font display set to "swap" and I'm loading it using this code:

  <link rel="preconnect" href="https://use.typekit.net" crossorigin>
  <link rel="preconnect" href="https://p.typekit.net" crossorigin>
  <link rel="preload" as="style" href="https://use.typekit.net/bym4igk.css">
  <link rel="stylesheet" href="https://use.typekit.net/bym4igk.css" media="print" onload="this.media='all'">

 
The preloading and stylesheet switching were some items I read might help with CWV score by warming up the connection and not blocking page rendering (though I'm wondering if the latter may have hurt more than it help).

Is there anything else I can do to improve how I'm loading the font? What exactly is the ideal way to do it?

And ultimately can someone give it to me straight - is there ANY way to achieve a strong Core Web Vitals score while using Adobe Fonts? Because I'm really starting to think that there isn't.

Thank you!

[thebluelizard]

I'm guessing by the crickets that the answer to this is no. It's pretty shocking to me that a company as large as Adobe can't come up with a way to serve typefaces in a performant manner, but I guess we'll have to look at Google Fonts as a substitute.

[Imaginerie]

Most answers here are made by volunteers, and only a few are made by Adobe employees (you recognise them with their little red A overlay in their logo). I usually answer on fonts related posts because I have a good understanding of how typography works, and in particular how Adobefont works. However, I, personnaly have no idea what your problem is 🙂 (That only reflect my ignorance of all things coding, as a designer).
My hunch is that your problem is going over a lot of people's heads, including obviously mine, hence the crickets. You probably need to contact Adobe directly, via webchat... or log a bug report through the user voice (that's somewhere that is read by Adobe employees)
https://adobefonts.uservoice.com/forums/940222-adobe-fonts-feature-requests-and-feedback
Sorry to offer no help at all, but because of the way this forum operates, any question that is a bit niche or very very specific, might not receive the attention it deserves.

[thebluelizard]

Thanks for the response, though I'm surprised "what's the best way to use Adobe fonts on a website" would be considered a niche question. I'll contact Adobe I guess, but I'm not going to hold out a lot of hope. I think their webfont system is probably just dated (which is unfortunate, as I remember when Typekit was on the cutting edge of this kind of stuff before it was acquired by Adobe).

[Imaginerie]

Sorry about the confusion,

I can only offer a few pointers...

- You could search the forum for questions similar to yours and see if you can spot a person that seem knowledgeable and contact them privately. To do so, just click on their name and their profile will open, you will then be able to message them

it's a bold move, but I have personnaly been contacted privately for help, and it doesn't bother me. That's what I am here for.

- Second one, could you duplicate your post in the fonts forum? Even if it doesn't really belong here, it will no doubt widen your reach.

[Molly Doane]

Hi there –

I'm sorry it took so long to get you a response from our team. We continue to maintain our web project service, but we're not very familiar with Core Web Vitals.

There are settings in the web project editor that you can use to control when your web fonts are made available to the page, which could have an effect on the metrics. You can read more about the font loading and options in our help pages:

https://helpx.adobe.com/fonts/using/embed-codes.html
https://helpx.adobe.com/fonts/using/font-display-settings.html

I hope this helps. –Molly

[thebluelizard · Accepted solution]

So the short answer is: there isn't a way. All of your solutions rely on a CSS @Import call which is render-blocking and produces performance issues that Core Web Vitals penalizes.

Looks like we'll have to abandon using Adobe Fonts for our web projects. It's unfortunate, but ranking well in Google and giving users a fast experience is much more important than a typeface at the end of the day.

[James h]

The thing is you should be familiar with Core Web Vitals if your offering web fonts