search

KyleAMathews / typefaces

NPM packages for Open Source typefaces
2.6k stars 91 forks source link

Preloading fonts/stylesheets #128

Open OllyNural opened 5 years ago

OllyNural commented 5 years ago

Hi,

I'm new to font loading and web dev in general, but wondering if it would be possible to preload fonts? I was noticing loading my fonts on my local/site were queued until over 700ms-1s, and only then were they making the (lightning fast) request to get the font.

Looking at the network requests for the fonts, there is no preload or async on the css stylesheet request that loads the fontFace. Is there anyway to optimise this? Or am I just projecting my own issues onto an issue here 😂

The queuing timer of the actual font request image

The initial stylesheet request. image

This is through adding a require('typeface-cutive'); and using a font-family in my css files.

Thank you! (And thanks for making an awesome library too)

JoeRoddy commented 4 years ago

Encountering the exact same issue in a fresh create-react-app project.

The fonts flash the base font-family for about .5s before my imported fonts appear.

Have to switch to using google's cdn for now, not sure why this would have any delay if it's packaged with the application in node_modules.

The google cdn fonts have the same exact delay on the initial load, but caches how you would expect and loads instantly on subsequent page loads. Somehow I'm getting the same loading flash on every single load by importing the typeface as a dependency.

oyeanuj commented 4 years ago

@KyleAMathews Also facing the same issue. Any thoughts on what is the recommended way forward?

yippira commented 4 years ago

@KyleAMathews I am also facing the same issue with FOUT. Additionally, is there a way we can set font-display to fallback?

sherbakovdev commented 4 years ago

Same issue.

Seybo commented 4 years ago

same here takes whooping 3 second on slow 3g image

dada1smo commented 3 years ago

Same issue here, but, interestingly, I have imported two packages (Archivo and Space Mono) and only Space Mono takes longer to load (165.80 ms). Also, it's not respecting the fallback font for some reason.