17 @fontface fonts in stylesheet. Is that bad?

[MacBoobsPro]

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]

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?

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!

 

[MacBoobsPro]

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!

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

 

[manueld]

And from a typography/design standpoint - i wouldn't use any more than 2-3 font families.

 

[fig]

And from a typography/design standpoint - i wouldn't use any more than 2-3 font families.

He mentioned that all those faces were the same family. I had the same first thought though

To the OP, I'd assume you aren't using ALL those weights and styles in the site? I'd think it would be pretty easy to do some editing and just load the 4-6 that you're actually using throughout to reduce the download strain.

 

[DenBeke]

Also note that there are still a lot of browsers that do not support new fonts. (Yes, most of them do today, but most of people still uses older browsers.)

 

[jtara]

That's fine.

The browser will only load those fonts that are actually used in the document.

What's not fine (IMO), from a design standpoint, is using 17 fonts on one website!

OK, if you are hosting multiple unrelated websites, and each site has a more restrained selection of fonts.

 

[MacBoobsPro]

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]

Anyhoo, I'm working with a few custom fonts I've bought from Fontspring.com.

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.

 

[MacBoobsPro]

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.

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