17 @fontface fonts in stylesheet. Is that bad?

Howdy. Very slowly I'm learning how to create better and better websites. Today I even learnt how to create my own form and style it and... get this... it actually worked! hehe.

Anyhoo, I'm working with a few custom fonts I've bought from Fontspring.com. I bought a whole family of 17 fonts. Each of the fonts came with its own stylesheet. I was thinking though, to aid in development would it be better to put all the family in one stylesheet and load all the fonts on the server? Then I can just use that one stylesheet throughout my site and have it call on each font as and when its needed. Then I thought, would that force each page to load all 17 fonts or will it only load the font that is required as defined in the CSS?

Hope that makes sense.

segovius said:

Generally this is a really bad idea and adds to page load quite considerably. You're loading whole families of fonts - and different types of the same font - for example, IE downloads the font file even if no elements in the page use the font.

You can cache the font files (with Apache) by GZipping them but in general you'd have to say 17 @font-face declarations is bad practice.

Haven't used Fontspring but most font servers like Typekit and Googlefonts have a tool where you can check the page-load impact.

PS: Hala Madrid!

Click to expand...

I thought as much. Oh well. Thanks for the info. Visca Barça!

Hi Guys. I would never dream of using them all even if they are all the same family. I'm a member of the International Society of Typographic Designers so I know what I'm doing in that respect

What I was thinking of doing is having a single .css stylesheet with all the fonts listed so all I had to do was style a page and upload it without having to mess around with extra style sheets etc.

Essentially having everything in one place and when a font is called its all ready to go and I can style to my hearts content as I build the site without having to worry about linking new styles etc.

I hope that makes sense but either way I've decided against it now from what people have said here.

Thanks for the info.

SrWebDeveloper said:

You might want to check out WebFont Loader at http://24ways.org/2010/using-the-webfont-loader-to-make-browsers-behave-the-same/

In a nutshell it makes font loading for all browsers behave in the way FF handles it (see other comments here) plus you can control the loading of fonts.

Very cool JS tool.

Click to expand...

Thanks that looks interesting but I'm still learning the basics and adding more JS will just confuse me at this point hehe.