2

If you have an html file, and in that html file you link to styles.css which covers all the styling of the page. Then inside of styles.css you have something like @import url('../css/fonts.css'). Fonts.css is just a couple dozen font-face declarations. Basically covering all of your bases.

If styles.css only uses one or two of those fonts, will there be a performance hit when the browser tries to download all of the unused fonts in fonts.css, or will it only download the ones it needs as it comes up?

Similarly, what happens if fonts.css was linked inside of the HTML file?

4

@import in-and-of itself is slow. You shouldn't be using unless absolutely necessary and in this case I don't think it is. Just create a second <link> element to the style sheet with the font rules or include them in styles.css.

Unused font that needs to be downloaded will not be downloaded so declaring them but never using them will not hurt performance.

  • If I <link> both fonts.css and styles.css in the HTML file, can styles.css use the font face declarations inside of fonts.css, or do I have to link to link fonts.css inside of styles.css directly? – Taylor Huston Jul 15 '14 at 18:56
  • You can link to the fonts in styles.css as long as fonts.css is linked to first. Since CSS cascades you need to declare the fonts before you can use them. – John Conde Jul 15 '14 at 18:58
  • It's worth mentioning that its possible to extract font files and then compile with only the ones you want. This would resolve the issue of unused fonts, if the font being used is only used on several pages then you just load the CSS only on those pages. If using WordPress then you use is_page() and for Joomla you just publish the a script module on selective pages, all other content managements will have a way of doing this. – Simon Hayter Jul 16 '14 at 10:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.