Search the blog

Since this blog post was published the use of font-face has become widespread. There are many commercial font-face services like TypeKit as well as the free Google Fonts. The information in this post is still valid though to those sites that don't use font-face. Tim Bennett — July 2014.

Before I begin this article I’ll have to address an issue of semantics. According to my dictionary a font is ‘a set of type of one particular face and size’; a typeface is ‘a particular design of type’. In computing terms a font is a digital file that stores the information needed to render ‘a set of type of one particular face and size’ on your screen. A font and a typeface are different things and pedantic designers insist that you don’t use the terms interchangeably. You need to know this because in answering the question ‘Can you use any font/typeface on your website?’ you will need to know that when I refer to typefaces I mean something like Arial or Times New Roman and when I refer to fonts I am talking about the file your computer uses to render typefaces. It may sound trivial but I can assure you it’s relevant.

How font files are used on web pages

When you view a webpage the typeface(s) used within the web page are rendered from a font on your computer. So if you don’t have the necessary font files on your computer the web page will display one of your system’s default typefaces.

Because of the different fonts that come with different systems (Windows, Mac, Linux) there are very few fonts that are considered to be available to the majority of users. Such fonts are called ‘web safe’ fonts. You may have noticed the same handful of typefaces are used across most sites. Are you restricted to these select few? By default you are very limited but there are a few options that allow you to use additional typefaces. Here are a few:

Host the font file on your server

You can guarantee all your visitors will have the requisite font files by hosting them on your site’s server. You can set your site up so the font is download and used by your visitors’ computers. The works great in most browsers. However, it does open up some licensing issues as the majority of font licenses do not permit you to make a font file available in the public domain—which is effectively what you’d be doing. There are however, font hosting services that take care of the legal side for you. This doesn’t mean you can use any font you like; you rely on the hosting service to host your font. This option is still limited but much less so that relying on the user having it on their computer.

Fonts as images

You can use any font in the designers’ collection if you convert it to any image. This satisfies almost all licenses. There are two main drawbacks though: the site cannot be read by search engines and the text is not suitable for ‘dynamic’ content (content generated by a database or user input).

Font as Flash movies

Flash movies allow for font files to be embedded but don’t make the fonts publicly available to people. There are several technologies available that replace live text with a small Flash movie that renders your text using Flash. This is a good option for headings bit it is inadvisable to use for large chunks of text—or against certain backgrounds.

So there are a few options but all of them have their drawbacks. Web documents and typefaces have never been good friends of one another. In most cases, you just need to make the best of a bad situation.

For help in building your website please call me on 07843 483 078 or get a free quote online.

Tim Bennett is a web designer and developer. He has a First Class Honours degree in Computing from Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.