optimization | @font-face with <link>
Hey, i know pre-loading fonts or links of any sort of importance aids in optimization. If i have a local font that i have a
@font-face declaration for, can i also include something like <link rel="preload" href="fonts/fontName.woff2" as="font" type="font/woff2/> alongside it or am i unable to have both?
Thanks in advance.7 Replies
Stack Overflow
Preloading @font-face fonts?
Is it possible to preload or otherwise cache @font-face fonts, most likely with javascript, before the page loads so you don't get that ugly jump when the page finally does load?
oh awesome! thanks
the browser will warn you if you dont use the font within x time (i think it is a few seconds or a minute, im not sure)
in those cases, remove the preloaded font
by the way, don't forget to use font swapping
just add
font-display: swap and you are good to go
basically, what it does is that it tries to find the font, and if it doesn't it will use an available fallback
when the font is available, it will swap the font from the fallback to the one you wanted
this way, the page doesnt stop loading and rendering because a font is missing, and it keeps doing it's thingAh okay, I usually define
font-display: swap; in my @font-face declaration, that’s more recommended than on the body or specific element right?it only works inside the
@font-face, as far as i knowOkay sweet, I’m on the right track then
Thank you
you're welcome