I’m a developer and as such I very much have a developer’s mindset… Font’s what fonts? You can read it can’t you?

This is why we have designers, because if I were in charge the web it would be in all black on white Arial or whatever your default font might be.

Ok, I’m not that cynical, but I do know my place as a developer and rely heavily on designers to make the things I build look good and this includes the use of fonts.

Even amongst some of the best designers I know, there is a lot of confusion to how fonts work on the web. I can’t tell you how many design files I have received with some crazy font combinations that can’t be used online or how many times clients have provided branding guides only to be surprised not everything can be replicated.

The Basics of Fonts and How They Work

Your computer can only display the fonts that it has installed on it or that are made available to it by other means. If a designer of any computer based medium is to deliver a specific font as part of their presentation they must ensure that the chosen font is available to your computer for display.

There are three ways to ensure a font is displayed as we intend:

  1. Use a common/universal font, such as Arial
  2. Deliver the needed font along with everything else that makes up what we are presenting. In the case of web page this would be the images, HTML, CSS, javascript, etc.
  3. Convert it to an image so that we do not need to rely on the end user having access to the required font. This is common when displaying brands and logos.

So You Don’t Want to Use Arial?

Fair enough (I guess) and you don’t want to use another universal font… Times New Roman, anyone?

Now we have to identify the fonts we are going to use and how we are going to deliver them to the end user. When a designer wants to use a new font in Illustrator or Photoshop they will simply install it on their computer. It’s obviously not a reasonable proposition to ask our website visitors to install fonts so they can see our site in all its glory so we must package them with our website.

Computer Fonts are not Web Fonts

The fonts that a designer installs on their computer via font library files are not the same files we can use in a website to send to end user. I can always tell I am working with a print designer when they package up the font files for me. So in order to find fonts for web use we must look online.

Everything Online is Free, Right?

Like it seems with all things ‘computers’ there are open source versions and there are licensed versions. Licensed fonts are those that you have to pay for and open source fonts are those that developers can use free of charge.

Licensed Web Fonts

If you are real picky about your fonts or your project must follow strict branding guidelines, you may find the fonts you need are licensed, meaning you have to pay for the right to use them. Typical licensing models are monthly or annual subscriptions from services like Fonts.com Adobe Edge and TypeKit. Once your subscription is in place and you have chosen your fonts, your developer will need to install a small script within the website that verifies the subscription and delivers the fonts. Some services provide web font files that be stored on your server and other’s deliver the fonts from their servers via that script.

Open Source Fonts

Free is good, right? There are some great open source fonts and a large selection, Google (Google Fonts) being the primary source whereby you can search for and find fonts for use in your web projects free of charge. Just like the licensed fonts, these can be included in your web project via a provided script.

Did I Mention Not All Fonts are Web Fonts?

Not all fonts are web fonts and when you search for fonts, especially on the commercial licensed font sites, make sure you are searching web fonts. You may find that you will have to substitute some planned fonts for what is available for web use.

A Word of Warning for Web Designers

Be sure that when you are preparing your design comps for clients that you are using web ready fonts (open source or licensed). Selling a client on a particular design that can’t be implemented is tough, especially for the developer who usually is the one to have to provide the bad news. Also remember what I said about being a developer… If I had it my way everything would be Arial, do you really want to leave me in charge of finding web alternatives for your design?

photo by Cory Schmitz / cc