A Non-technical Introduction to Webfonts

Webfonts explained

The last thing any designer or website owner wants is to find out after finalizing a new branding style guide or website mockup that one or more of the fonts they’ve painstakingly selected is not available for the web, or has a prohibitively expensive web font license. I’ve seen it happen, and it’s disappointing for everyone involved.

What’s a Webfont, Anyway?

You may be wondering why you suddenly have these additional licenses and types of font files to deal with when we’ve been building websites for a long time and webfonts are newer technology. We must have had some way of dealing with this before, right?

Well, yes and no.

Body Copy: The Old Way

We used to recommend that the main text of a site be in a “web-safe font,” as you can see in this excerpt from the Aeolidia archives:

For the main text on a site, it’s important to use a font that most computer users have on their system (or they will see the default font instead), and that will be readable at small sizes without anti-aliasing. There are only a few fonts designed for the computer screen that will still look clear and readable at 10-12 pixels.

There’s still some good advice in that excerpt. You do still need to be careful about readability at small sizes – not all premium fonts work well for body copy across browsers – and it’s still always a safe bet to use one of those original web-safe fonts (Verdana, Arial, Helvetica, Georgia, Times New Roman, etc.).

That said, there are now plenty of other fonts we can use for the web, so we certainly don’t have to limit ourselves to those old standards. There are even some really great free fonts suitable for body copy, and good designers (like all the great Aeolidia folks) are well-versed in selecting the good ones.

Headlines & Display Text: The Old Way

The other strategy we used to use was putting text into images. This has been retired as a technique for a variety of reasons, including:

  • It’s usually a nightmare for anyone trying to use the site with a screen reader
  • It can really increase loading time to have all those extra images
  • It looks terrible on retina unless you were to individually optimize every image
  • It’s much less flexible for updates and text edits
  • It’s hard for search engines to index the content on the page when it’s all trapped in images

You can see why that’s not a technique we recommend anymore, except in some very specific instances (ads, for example).

The New Way

Instead of limiting ourselves to those few standard fonts or using the (now dreaded) text-as-an-image method, we’re now able to actually load certain types of font files along with all our other website files and display those fonts for our visitors via a technology called webfonts. These are basically font files that have been reformatted to work in the browser (this also required changes to the way browsers work to make it happen).

Webfonts are awesome because we can apply them to any text in the site, including text generated by a content management system (like WordPress). Also, all that text is clearly laid out in the code which means it’s accessible for various assistive devices and can be read and indexed by search engines.

What to Look For

Not all fonts are available with all the file types and formatting needed for use online – that’s why we occasionally run into that problem described earlier where we can’t exactly match a design or branding guide. When you’re looking through fonts online, you’ll want to make sure they’re marked as having a webfont available. Different sites do this in different ways:


Fontspring.com uses a little globe icon


MyFonts.com uses a text marker and also allows you to filter for webfonts

Services like Webtype.com and TypeKit only offer fonts that are available for the web (that’s their whole model).

Again, a good designer will help you navigate all of this – that’s one great reason to work with someone who’s familiar with the landscape of webfonts and providers. The key is to make smart choices as early in your project as possible about which fonts you’re using, and to understand that webfont licenses are often part of what you’ll need to budget when you take on a new site project.

Now you know why we web folks are so excited about webfonts. In an upcoming post, we’ll dive deeper into what you need to know about licensing to start using them.

  1. This is why I use google fonts they are free, simple and have lots of choices.

    • Google Fonts are certainly a good option! The downfall (with most web font providers, with the possible exception of those from H&FJ) is that there’s no overall quality control so you have to be careful to test whatever font(s) you use to be sure they render well at the sizes you’re using, across browsers. For example, I see Josefin Sans used a ton but it is actually basically illegible at really small sizes on certain browsers. It’s a great choice for larger applications, though.

      I suppose it also comes down to whether you want to limit your design choices based on the fonts Google has available via their web fonts service, or whether you want to be able to choose from a larger variety of fonts (knowing that there may be licensing costs). The answer will depend on the designer and the project!

  2. OldManJ says,

    I am trying to convince my company to use Google Web Fonts. Its been hard to explain to them what would happen if Google Web Fonts was not accessible by the clients computer.

    What other benefits are there to using something like Google Web Fonts vs downloading the fonts and hosting them within the company infrastructure?

    Is here any speed performance or anything. I am looking for anything that will help me sell this to the “uppers” and architects.

    • It’s pretty unlikely that Google web fonts would ever be inaccessible (I guess if somehow all their server systems went down), but in that case the fonts would fall back to whatever other fonts you’ve put in the font stack.

      One potential benefit for Google fonts is that they’re used on a lot of sites, so your visitor’s browser may already have some of the more common ones cached (if they’ve already visited a site using the same font). I don’t think there’s any other speed benefit to using Google vs. having them self-hosted, although I haven’t really looked into it.

      A lot of the fonts available via Google can also be downloaded and self-hosted, in case that ends up being the solution your company goes with. Many can also be font on FontSquirrel.com (there’s a lot of overlap).

      • OldManJ says,

        I appreciate your response. I am trying to avoid a lot of Enterprise Red Tape and processes. Hosting fonts, paperwork, infrastructure, and such is a timesink when we could just use Google Fonts. Trying find that silver bullet to convince the Architects and Management.

        Thanks again.

Leave a Reply

Or discuss this post in person by joining our Facebook group for creative product-based businesses.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Read more like this