Does having custom fonts uploaded to a css doc using @font-face make things render more slowly?

Question

I downloaded a font from dafont.com and then added it to the stylesheet for a html file that's currently just on my computer. I changed most of the buttons to use that font, but now it seems to load way slower (it used to render almost instantly in my browser) because of the custom font. Is there a way I can fix this for the files local to my computer, and will it also cause the pages to render slowly once it's actually uploaded to a website?

Answer 1

You can try different approaches to improve performance:

• Use a local reference before checking for an online version: this will work on your computer, but you never know if a user may have installed a different font with the same name (it's improbable, but that could break your expected look-and-feel).
• Use lazy load to download the font after the page has been rendered: this may not be really useful is the font that you are using is the main font on your page.
• Don't include @font-face for fonts that you are not going to use: some browsers will download the fonts whether they are used or not.
• If possible, use fonts hosted externally (eg: in Google Fonts): this would make your page faster if the font is cached from previous visits, and it takes one connection away from your host.
• This may sound a bit off but: choose the fonts wisely. If you pick a beautiful font but the files are 10MB, there will be a performance impact like it or not. And related to the file size,
• If possible, gzip your font files: they will weigh less, they will take less time to download.

Read more about this topic on the links:

• Preventing the performance hit from custom fonts .
• @font-face and performance