Skip to main content
T
thebluelizard
Participant
June 16, 2023
Answered

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

  • June 16, 2023
  • 3 replies
  • 5154 views

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 @1552174 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!

      Correct answer thebluelizard

      So the short answer is: there isn't a way. All of your solutions rely on a CSS @1552174 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.

      3 replies

      L
      Luke Leber
      Participant
      June 4, 2025

      The only way to improve the LCP metric (if and only if your LCP element is NOT font-dependent) is to remove the CSS from the critical rendering path.

       

      <!-- This is not in the critical rendering path and won't block first paint -->
<link rel="preload" href="https://adobe-typekit-site-crap.com/whatever.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- This is a fallback for no-js users.  It'll be part of the critical rendering path still... -->
<noscript><link rel="stylesheet" href="https://adobe-typekit-site-crap.com/whatever.css"></noscript>

       

      This will, of course, naturally cause other issues...

      1.  It will negatively impact the CLS web vitals metric because everything will jump around after the fonts load after first paint.
      2.  It may cause issues with a Content Security Policy if your site is using one (it should be!).

       

      The tl;dr on this one is that Adobe has majorly dropped the ball.  All it would take is for Adobe to allow users to self-host the CSS that includes the font faces.  This could be inlined into the document response...but so far Adobe has not made any guarantees that the actual font binary paths are stable enough to do so...

        Molly Doane
        Molly Doane
        Participating Frequently
        July 13, 2023

        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

        T
        thebluelizardAuthorCorrect answer
        Participant
        July 18, 2023

        So the short answer is: there isn't a way. All of your solutions rely on a CSS @1552174 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.

          T
          thebluelizardAuthor
          Participant
          June 21, 2023

          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
            Community Expert
            ImaginerieCommunity Expert
            Community Expert
            June 21, 2023

            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.

            T
            thebluelizardAuthor
            Participant
            June 26, 2023

            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).

              Terms & ConditionsAccessibility statement
              Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices