17 @fontface fonts in stylesheet. Is that bad?

Discussion in 'Web Design and Development' started by MacBoobsPro, Dec 3, 2012.

  1. MacBoobsPro macrumors 603


    Jan 10, 2006
    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.
  2. segovius macrumors regular


    Sep 18, 2006
    Barcelona / Berlin
    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! ;)
  3. MacBoobsPro thread starter macrumors 603


    Jan 10, 2006
    I thought as much. Oh well. Thanks for the info. Visca Barça!
  4. manueld macrumors 6502

    Jun 8, 2009
    And from a typography/design standpoint - i wouldn't use any more than 2-3 font families.
  5. fig macrumors 6502a


    Jun 13, 2012
    Austin, TX
    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.
  6. DenBeke macrumors regular

    Aug 11, 2011
    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.)
  7. jtara macrumors 65816

    Mar 23, 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.
  8. MacBoobsPro thread starter macrumors 603


    Jan 10, 2006
    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.
  9. SrWebDeveloper macrumors 68000


    Dec 7, 2007
    Alexandria, VA, USA
    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.
  10. MacBoobsPro thread starter macrumors 603


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

Share This Page