Do You Rely On Embedded Fonts?

Peter North
Lead Design Writer at SitePoint
Tweet

Embedded web fonts can add stylish typography to your web design for just a few kilobytes. Techniques that used to require large, slow-loading images are now handled with lightweight font files and several lines of CSS. Ever since the @font-face CSS property garnered broad support from all major browsers, specialized fonts have become very popular. As a result, a wide variety of web font services have appeared to harness the potential of embedded fonts.

There are quite a few very popular font services, and some very big names have created their own font libraries. Typekit (by Adobe) is a well-known font provider, and Google offers an extensive font library as well. There are dozens of lesser-known but equally worthy sites such as Fonts Live, Fontdeck, and Webtype.

Services like Fontdeck offer a wide variety of fonts starting at $2.50 per year

The advantages of embedded fonts are numerous: Changes to even the most prominent lettering on your websites are easily done without the tedious task of loading your original design in Photoshop, correcting headers or taglines, and exporting. And, consciously choosing a font that works well with your other aesthetics is almost certainly better than deferring to a ubiquitous font like Helvetica or Arial — or worse — letting various browsers dictate how your text will show up based on their own defaults. Lastly, making your large lettering out of actual text (instead of images of text) may offer some SEO and site speed benefits that could place your site more prominently in search results.

But, web font services do have a few downsides that come with all of that stylish typography. Relying on an external site for font information could create noticeably slower page loads, and the fonts could be missing entirely if the external font library is down or if your installation somehow broke. There are many fallbacks to help your site “fail gracefully” if a problem occurs with your preferred font, but few designers want their design to be compromised, whether it’s done “gracefully” or not. It’s hard not to rely on your preferred fonts, and as a result, a font-dependent site can look very ugly and odd if those carefully-chosen fonts go missing. The added cost and increase in loading times may be small, but they’re nonetheless part of the price to pay for pretty typography.

And, the reality is that all of these services are based on @font-face, which is freely available for everyone to use independently.

Do you have a preferred font library? Do you work directly with @font-face instead? Or, do you avoid specialized fonts altogether?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.nmcmahon.co.uk Niall McMahon

    Good point. I generally use Google Web Fonts on most projects, usually just for a nice font to use for headings on a page, but sometimes for the body text too (on my website for example).

    I have had cases where loading the fonts from Google has failed, but you should be specifying a font-family anyway, so if one font isn’t available, another one loads. My body text backup is usually “Helvetica Neue, Helvetica, Arial, sans-serif”. My site might not look exactly how I want it using one of these other fonts but it looks OK, and the content is still all readable which is the most important thing.

  • http://www.lightson-studio.co.uk Aaron @ Lights.On Studio

    Im the same as Niall, i generally use Google Web Fonts.

    Since @font-face has been implemented across all the browsers it has made my job easier and helps me provide more visually stunning websites.

    Great Read.

  • http://www.dropkickdigital.com/ Dropkick Digital

    Its amazing what a good font choice can do for the presentation of a site. Google Web Fonts seems to have a nice selection to help give the body of your text a little creativity

  • http://reeddesign.co.uk Roy Reed

    I’ve used Google Fonts and Typekit but I prefer to host my own fonts so that I’m not dependent on someone else’s server. I prefer to download font kits from FontSquirrel (free) or one of the paid options like FontSpring.

  • http://www.google.com Adam

    Google Web Fonts :) – i started to use it not so long ago, but love it !

  • Alan

    Microsoft WEFT is still available. I used that back in the days when IE was the only browser supporting online fonts. If so, no need to rely on Google, or others. Simply load your own.

  • Simon Davies

    I use Google Web Fonts, I also download the ones I can and then use the CSS @font-face method so that if the hosting site of the Google fonts goes down I still main tain the feel as these are on my server, and if my server goes down then well, the site is as well so arrgh!

    Its great as they offer a much wider option to a developer especially when you try to match a designers design as close as you can, and try not to upset them when they see their beautiful design covered in Arial, the amount of designs I used to see that used pretty fonts for site copy, and then you see the designers face when you say nope :-)

  • http://xjjz.co.uk am2100

    I find that google fonts can often render poorly and that there is an as yet unresolved issue where google won’t serve up multiple font styles to IE9.

    Looking for an alternative I came across Font Squirrel and have been using their excellent service ever since.

    Serving fonts from your own server won’t solve any problems that might occur in your installation, but it does remove the possibility that your site could be compromised by a 3rd party service.

  • http://www.wedoxhtml.com/ Mrinal

    As a html/css coder I am working embedded font’s for last one year of my all site and project I done. It’s support all modern browser and bring a standard look and feel.

  • http://www.buyonenote2010.com/ Buy OneNote 2010

    Relying on an external site for font information could create noticeably slower page loads, and the fonts could be missing entirely if the external font library is down or if your installation somehow broke.

  • http://www.logicalthings.com Art Thompson

    I regularly use Google Web Fonts, but I also have TypeKit and Fonts.com accounts for any client whose brand demands a specific font that can’t be approximated. As a rule of thumb, I only use one hosted font service per domain. My personal experience has been that each of these services seem as reliable as the other. Your results may vary.

    I do use hosted services exclusively as opposed to locally served font files. Since I also rely on Google for serving jQuery, I have less concern for their font servers going down than other vendors, but no company’s service is infallible.

    I generally avoid FontSquirrel WOFF conversions of TTF or OTF fonts as the converted metrics don’t seem as well crafted as fonts tuned specifically for screen rendering. This is probably not so much an issue at large pixel sizes, but definitely at smaller ones.

    Speaking of smaller pixel sizes, another rule I have is not using any web fonts for text set in less than 14px as I have found that browser rendering at small sizes is hit or miss regardless of the service. I think the general web viewing audience has been anesthetized to seeing Arial, Verdana and Georgia for paragraph text and I’m fine working around those three options from a design standpoint since they each render quite nicely down to 9px across most browsers and versions.