In order to see text on your website as you intended (headers, titles, body copy etc.) visitors must have your chosen font installed. Without it, the font will automatically be substituted, leaving you without any control over its replacement.
This can affect the design and readability of your website. Web-safe fonts ensure text on your website appears consistently across a range of computers or operating systems that might be used.
There are a number of web-safe fonts from which to choose, including Arial, Garamond, and Verdana, but the list is restricted. So, if you want to be more creative and move away from these standard fonts, here are three alternatives that allow you to use just about any font you fancy.
sIFR (Scalable Inman Flash Replacement)
However, sIFR is not compatible with mobile devices and can affect page loading times. If you use this method, it is best kept for headers and titles.
The most successful development so far in the move away from web-safe fonts, @font-face enables you to obtain custom fonts from sites such as Google Web Fonts and, licence permitting, to use them in your website.
The process, compatible with all popular browsers, is fairly simple if you’re familiar with CSS: upload the font files to your server and add some code into your CSS file. When a visitor loads your page, the code refers to that font file and switches the text to your chosen font.
Ensure you set a fallback font, i.e. a web-safe font that best matches your chosen custom font, so that if a user’s computer doesn’t support @font-face, they can still read your text in a similar font.
There are a couple of downsides to @font-face. If your chosen font’s file is large in size (e.g. it contains the entire font family), it can take a while for the website to load, leading to a visible switch from fallback to custom font or a delay in text appearing.
Catering for all popular browsers and devices can be tricky. You’ll need to create and upload different formats of your font file (e.g. EOT, WOFF, OTE and SVG) for each one, ensuring your fonts appear consistently.
The self-confessed ‘easiest way to use real fonts on your website’, Typekit is a low-cost solution to accessing and using a wide range of fonts.
And they’re easy to implement because, instead of uploading a multitude of font files to your website’s server, you simply pick the fonts you need from the Typekit website where they’re all hosted. All you need to do to access the range is subscribe to the service.
The World Wide Web is enjoying an influx of fresh and stylish typography thanks to the deviation away from web-safe fonts with methods such as the three explained above. Each has its own advantages, enabling you to make use of a broader and more exciting range of fonts. But try not get too carried away because no matter which fonts you use, the ultimate aim for the text on your website should always be the same. You should make it as easy and enjoyable as possible for visitors to read.