Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Dec 3, 2012, 03:31 PM   #1
MacBoobsPro
macrumors 603
 
MacBoobsPro's Avatar
 
Join Date: Jan 2006
Send a message via AIM to MacBoobsPro
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.
MacBoobsPro is offline   0 Reply With Quote
Old Dec 3, 2012, 03:54 PM   #2
segovius
macrumors regular
 
Join Date: Sep 2006
Location: Barcelona / Berlin
Send a message via AIM to segovius Send a message via Yahoo to segovius Send a message via Skype™ to segovius
Quote:
Originally Posted by MacBoobsPro View Post
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!
segovius is offline   0 Reply With Quote
Old Dec 3, 2012, 03:58 PM   #3
MacBoobsPro
Thread Starter
macrumors 603
 
MacBoobsPro's Avatar
 
Join Date: Jan 2006
Send a message via AIM to MacBoobsPro
Quote:
Originally Posted by segovius View Post
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!
MacBoobsPro is offline   0 Reply With Quote
Old Dec 3, 2012, 04:10 PM   #4
manueld
macrumors 6502
 
Join Date: Jun 2009
And from a typography/design standpoint - i wouldn't use any more than 2-3 font families.
manueld is offline   0 Reply With Quote
Old Dec 4, 2012, 12:30 AM   #5
fig
macrumors 6502a
 
Join Date: Jun 2012
Location: Houston, TX
Quote:
Originally Posted by manueld View Post
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.
__________________
figdigital | @figdigital
fig is offline   0 Reply With Quote
Old Dec 4, 2012, 02:04 PM   #6
DenBeke
macrumors regular
 
Join Date: Aug 2011
Location: Antwerp
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.)
DenBeke is offline   0 Reply With Quote
Old Dec 5, 2012, 03:39 PM   #7
jtara
macrumors 65816
 
Join Date: Mar 2009
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.
jtara is offline   0 Reply With Quote
Old Dec 6, 2012, 03:07 PM   #8
MacBoobsPro
Thread Starter
macrumors 603
 
MacBoobsPro's Avatar
 
Join Date: Jan 2006
Send a message via AIM to 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.
MacBoobsPro is offline   0 Reply With Quote
Old Dec 7, 2012, 12:42 AM   #9
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
see vendor information in user profile
Quote:
Originally Posted by MacBoobsPro View Post
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-web...have-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.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Dec 10, 2012, 10:37 AM   #10
MacBoobsPro
Thread Starter
macrumors 603
 
MacBoobsPro's Avatar
 
Join Date: Jan 2006
Send a message via AIM to MacBoobsPro
Quote:
Originally Posted by SrWebDeveloper View Post
You might want to check out WebFont Loader at http://24ways.org/2010/using-the-web...have-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.
MacBoobsPro is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 07:43 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC