I can see that the fonts are in the Head section in Head HTML. However, it still takes a few seconds for the fonts to show up in my large document.
Can we add the rel tag to preload the fonts or is there another solution? I ask since the Head section cannot be edited directly.
<link rel="preload" href="style.css" as="style">
Thank you!
It depends if you're referring to custom font (formats like .woff) or Google Fonts.
You could encorage preloading by setting this for custom fonts:
<link rel="preload" as="font" href="${resourcesFolderName}/custom-font.woff2" type="font/woff2" crossorigin="anonymous">
More on preload here: rel=preload - HTML: HyperText Markup Language | MDN
For Google fonts, this line will save a few milliseconds:
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
... since it warms up the connection to the server that actually contains the font files.
Setting this:
<link rel="preload" href="style.css" as="style">
Will definitely preload the CSS file, but the font files defined in that stylesheet will not be downloaded unless there is text present on the DOM that uses those fonts. The stylesheet is just telling the browser 'if you see a font with this face, here's where to look'.
If you see custom font code in the head, you should be editing the custom font item in the resource library directly. This will update what appears (grayed out) in the 'head' area.