Web Font Basics

Est. Reading Time: 4 minutes

For what felt like an eternity, web designers only had the option to use a handful of “web safe” fonts. These are fonts that were determined to be on over 97-99% of all users computers and generally safe to use.


Times New Roman, Georgia, Arial, Courier, Trebuchet, and Verdana are the standard web safe fonts. A few other fonts are lumped into the “web safe” group, but not all of them necessarily have as high of a probability that they will be on your users’ machines.

I like to use this site as a reference when I’m debating using a “web safe” font that isn’t one of the main 6 in my list.  http://cssfontstack.com/ 

When using fonts on the web you always provide a fallback in case the user does not have the primary font called by the code. W3C provides some commonly used fonts and examples of how to set up their fall-backs here: http://www.w3schools.com/cssref/css_websafe_fonts.asp  To give you an example, the font Palatino is only supported by 86% of mac users and 99% of windows users. So as a fallback, you call “Book Antiqua”, then Palatino, then any generic serif in a worst case scenario.

We’ve had the technology to call web fonts differently for a while now. That is, in a way that downloads the font with the website, ensuring that the correct font will be displayed, whether the user has it install as a system font or not, by using CSS3′s @font-face rule. But this technology has been slow to be adapted because of concerns with how to protect font licenses when the files are being directly downloaded. The solution has been to use different file formats for web fonts (.WOFF and .EOT) that are not the same type of file as your system fonts. However, .SVG and .TTF are also needed to ensure a full spectrum of browser support, as not all browsers support .WOFF and .EOT. But many licensed fonts will not provide you the .SVG and .TTF formats directly for web use since they can be downloaded and used as a system font on a persons computer, allowing people to essentially steal fonts from your website. That’s where font hosting services come into play. You can host your own .WOFF and .EOT fonts, but not all browsers will be able to use these files. Using a font host to serve up the .SVG and .TTF formats of your font keep the font secure by allowing the foundries to control the security measures used when the font is included on the site and give you all the browser compatibility you need.

Because there are 4 files involved when a font is used on the web, that means that each font you add will contribute slightly to the load time of of your site. These multiple files will only satisfy one weight of that font. For example, if you needed to provide the font Locator in both it’s regular and bold weight, you would have to tell the page to download 8 separate files. As you can imagine, this can get pretty hefty. In order to optimize your responsive site when viewed on a mobile device, you may not want to utilize all of the web fonts that your desktop version does, but instead let the site fall back to system fonts that are similar. You definitely want to limit the web fonts being used in your design overall, and obviously make sure not to download any fonts that aren’t really needed (if Locator italic bold is only being used in one instance on the whole site, do you really need it?).

Fonts that are free to use don’t need to be hosted by a font hosting provider (or you can find a bunch hosted by Google), but you do need to convert them from their original file type to all the different file formats so that they can be used by all the different browsers. There are a lot of free converters out there and the process is pretty simple.