Running my Blocs 3.5.5 generated website through Google’s Page Speed Insights yields a miserable score of 40 on Mobile for many pages, even though the same pages score 90 on Desktop. One piece of advice it gives is to PRELOAD fonts. I think this means only the fonts that are “above the fold” (the visible part in the browser when the page first loads). How do I do preload specific fonts?
I have read that the crossorigin attribute must be used even if the font fetched is not crossorigin. Without that, apparently, the same font will be fetched twice! Here is example code given:
<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
I assume that only WOFF2 is mentioned because most modern browsers will use that over TTF, WOFF, etc. That’s all fine and well. But again, how do I accomplish this? I know what fonts are used above the fold, so what I want to know is the JS code (assuming JS is the best way to do it) to add the preload and crossorigin attributes to specific fonts I specify on a particular page.
It’s also interesting that I cannot find a single thread in this forum discussing this topic. Am I alone in having thought about this?