Back in 2010, I wrote about using Websafe Fonts for your website to ensure that the display integrity was maintained. This article is long overdue and will revisit ‘websafe fonts’ and the use of Web Fonts to really spice up the look of your website.
A quick refresh on websafe fonts and why you want to use them. Until recently, when you selected a font to use on your website it was important to ensure that it could be displayed on the visitors computers. This was a function of the browser – and if you chose a font that was not loaded on the visitors computer, the visitors computer would substitute it’s own font… thus messing with the display integrity of your website.
However, the advent of Web Fonts means that a web designer can use a much wider range of fonts and do some pretty funky things to spice up a design.
Just what is a Web Font?
Web Fonts are a way to download fonts to the visitors computer. The font is hosted either on the webserver where the website resides or in a third party library. One of the first techniques to do this was known as the @font-face rule.
Web Fonts were introduced in the CSS2 specifications.
Basically, you can specify which font to use in your style sheet and download it to the visitors computer – so it doesn’t matter if the font is on the visitors computer or not.
Doesn’t that sound fantastic? It is – it really is.
However, there are two catches when using Web Fonts:
The browser has to support Web Fonts
For Web Fonts to work, the browser the visitor uses must support the implementation. Generally, Firefox; Chrome; Safari; Opera; Internet Explorer Version 9; Internet Explorer Version 10; and Internet Explorer Version 11 support Web Fonts. There is limited support in Internet Explorer Versions 5 through 8.
It’s important to define a ‘fall back’ websafe font in your stylesheet for browsers that can’t do Web Fonts.
The font you choose must be licensed for use on the Web
As with most things – you need to have a license to use the font as a Web Font; or the font has to be open source. Not all fonts carry a web font license and site owners and developers need to be aware of this fact. Always check that the font you are using has a license that lets you use it on your website.
Web Font Libraries
One of the best things about web fonts is that there are a number of web font services that you can choose from. The different services offer a range of options including font hosting.
Google Fonts
My personal preference is Google Fonts. Google Fonts has been incorporated into a number of WordPress Themes as standard, making it really easy to use.
The google font library is free and currently offers around 630 fonts.
The other benefit of Google Fonts is that you can download and use the fonts on your computer and in print work, giving you a seamless design process
Typekit
Typekit was purchased by Adobe in 2011 and is now part of the Creative Suite subscription.
Offering access to Adobe fonts, the Typekit library has specific licensing requirements depending on the level of subscription you take.
Font Squirrel
I quite like Font Squirrel. Font Squirrel is a site where you can identify free web fonts to use. Font Squirrel provides a WebFont generator where you can upload a font and create your own web font.
My only comment is that not all fonts lend themselves to Web Fonts and can become a bit patchy. Do some testing when you choose a font to use.
For more services check out the Hongkiats’ WebFont comparison and Smashing Magazines Review (it’s a little dated but still good).
How Do I Use Web Fonts
How you use Web Fonts depends on the type of service you’ve chosen to use.
For Google fonts, you can include fonts in 1 of 3 ways:
- A standard <link> code in the header of your website
- A Javascript include
- An @import function
or, if you have a WordPress website that doesn’t already include Google fonts or the Google font you want to use, you can use a plugin like WP Google Fonts
For Typekit, you’ll need to follow the instructions provded on the Typekit website and include the javascript provided.
Web fonts through Font Squirrel need to be uploaded to the webserver, or Content Delivery Network, for hosting and delivery. The inclusion of the fonts is then achieved through the style sheet for your website – I found FontSpring have an excellent explanation of how to include web fonts using the @font-face definition.
Websafe Fonts are a thing of the past
As more browsers support Web fonts, the use of websafe fonts are becoming a thing of the past. However, this doesn’t mean you shouldn’t consider using a websafe font – it means that you can use another, nicer, font as your primary font. Just make sure you define a standard websafe font as fallback, in case things go wrong.
Leave a Reply