I'm working on a website (https://georgiaencyclopedia.org) where I need to use Adobe Fonts (previously Typekit) for the serif typeface. I feel like I have tried everything to improve Core Web Vitals but I simply cannot get around the CLS and LCP scores that are brought about by the webfont 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.
This is how I'm loading in the webfont:
<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'">
and I've got font display set to "swap" on the Adobe Fonts side. 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 respectively (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?