Font loading delayed

Support
#1

Hi there

So I’m loading a custom Font via @font-face within the custom CSS. On some browsers though, when loading or navigating the page it loads another font first (some serif font) and replaces all text after a split second. I assume, it’s due to the order of which the CSS is loaded. Is there any way to place the loading closer to the top?

Happy Holidays btw :wink:

#2

Hi There,
Thanks for writing in!

You are right it depends on the CSS order of loading and also the font files. Some time heavy font file causes slow loading too.

Please add the @font-face css code to the top of the CSS file if you haven’t already.

Give us your website URL in a secure note so that we can have a look too.

Thanks

#3

credentials coming up

#4

Hi there,

It’s only normal, serif font is one of browser’s default fonts which usually displayed upon load. It happens because the assigned font uses external font files which the browsers needed to download before it can render it. Hence, the first rendered font is the fall-back font which is the serif. Have you tried optimizing your site? Like caching the asset file like fonts and serve them through CDN? That will divide the traffic from your site and may load the font files much faster.

Thanks!

#5

I’m not a big fan of those «all in one caching plugins» since they sometimes really mess up your site. Do you know any specific plugin who’d only do the font trick?

#6

Hi there,

It will mess up your site if you over-configured it. Caching should be enough if you just wish to improve loading of your font files. BUT, if it’s just about font files then you may check this https://stackoverflow.com/questions/26553140/how-do-i-leverage-browser-caching-of-woff-fonts/28148035. Another thing is using CDN like CloudFlare to serve your files.

Thanks!

#7

Coding and server stuff is not really my strong side. Does this mean, I just paste the following code into my .htaccess?

<IfModule mod_expires.c>
# Fonts
# Add correct content-type for fonts
AddType application/basicsansnarrow-regular.eot 
AddType application/basicsansnarrow-regular.ttf
AddType application/basicsansnarrow-regular.otf
AddType application/basicsansnarrow-regular.woff
AddType image/basicsansnarrow-regular.svg

# Compress compressible fonts
# only uncomment if you dont have compression turned on already. Otherwise it will cause all other filestypes not to get compressed
# AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

ExpiresActive on

# Add a far future Expires header for fonts
ExpiresByType application/basicsansnarrow-regular "access plus 1 year"
ExpiresByType application/basicsansnarrow-regular "access plus 1 year"
ExpiresByType application/basicsansnarrow-regular "access plus 1 year"
ExpiresByType application/basicsansnarrow-regular "access plus 1 year"
ExpiresByType image/basicsansnarrow-regular "access plus 1 year"
</IfModule>
#8

Hi there,

No, you have to change the font name/files with the one your using in your @font-face. I think it’s easier to use a plugin for this kind optimization or consult a webmaster familiar with this htaccess setup.

Thanks!

#9

k, i’ll give it a shot

#10

Great, thank you.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.