Optimizer: Add transformer to automatically add font-display:optional to (known) non-icon fonts

[westonruter]

Something that we're finding a lot in WordPress (e.g. ampproject/amp-wp#6036 and support topic) is that many sites use fonts and they fail to use font-display:optional. This is reported both by the Lighthouse font-display audit and the Pixi fontDisplay check:

In addition to skipping the font-display check specifically for icon fonts (#1218), what if we have a transformer which proactively adds font-display:optional for fonts which are known to be non-icon fonts? For Google Fonts, there's only a few icon fonts so I believe we can easily compile a list of such fonts to exclude for automatic “optionalification”.

The thing is that font-display:optional can make the first load of a website look bad if proper fallbacks are not used, so such a transformer likely cannot be applied by default. Nevertheless, it would be great to have such a transformer available so that you could have a way to resolve the audit failure just by enabling a transformer rather than having to hack the underlying code (which may not be feasible).

[jwold]

Notes from the July 14, 2021 PX Plugin: Leads meeting. Pradeep suggested this issue as part of the improvements we can do for Newspack.

* Pradeep Sonawane (PS) > There’s improvements we can do, like in `improve fonts loading on AMP`. Common thing that FCP needs improvement. Many sites use external fonts. If Google font, on AMP - I’m not sure, plugin doesn’t render font using AMP font right now. Not sure if good idea, just need to see if can improve page performance. 
* Weston Ruter (WR) > AMP-font deprecated in favor of font-display.
* PS > But what I’ve seen is when you use Google font with parameter display put to optional, still showing as eliminate external resources in warning. So in docs also, in Google dev doc it shows that we can actually further optimize by using AMP font, maybe that’s outdated. 
* WR > Yes it is, if you look at doc for AMP font I believe it says that it is deprecated and should no longer be used, instead use font display descriptor. Eliminating external request audit from lighthouse or Pixi, the solution is to inline the fonts files, but Google fonts doesn’t make that easy to do. So, that’s kind of limitation of Google fonts. Should be fixed on Google fonts side. Useful to make an option optimizer which identifies Google fonts. Already linter check for this that checks for Google fonts being used that don’t have font display optional. But transformer, which uses additional step which switches from font display: swap, to font-display: optional. And if transformer had parameters to say which fonts specifically should be transformed in that way, then what the AMP plugin could do is - wouldn’t transform by default but we could load page up and say fonts look like slowing down page, which font is safe to be optional. Could be part of onboarding PX scanning. PXA maybe, could analyze page and say things look like slowing down page. Are these truly optional? If so we can pass parameters to transformer and speed up site. I remember in the linter there’s checks for icon fonts as well. Can use PX guide. 
* WR > Common in WP in general, lack of `font-display: optional`. If we can automate more. If we know fonts more generic, maybe by default make things optional if we know good fallback in place. 
* Alberto Medina (AM) > Should we open an issue for creating that optimizer? 
* Adam Silverstein > Can you expand on why it’s hard to get fonts to embed from Google fonts? Way to get in page directly? 
* WR > Google fonts uses constant negotiation to serve different font files based on platform. Different for Mac, windows, android, and different browsers. That’s the difficulty. I tried inlining them as well, and I tried fetching the stylesheet with curl and provide different user agents, and different user agents return different WOFF files in stylesheet. Then I pick most popular browser on most popular OS and use those files. Acceptable and not optimized for non-majority browsers.