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)

This process relies on embedding the font of your choice into a Flash file, which is then uploaded to your website’s server. You can then tell text to dynamically change to the font within that Flash file with JavaScript code.

This way, your text is still selectable and searchable which is great for both users and search engines. On the off-chance that a user doesn’t have Flash installed or JavaScript enabled, your original text will still appear as plain text, which you’d have typed into your HTML.

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.

@font-face

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.

Typekit

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.

Any issues regarding the types of font file and licensing are all taken care of for you, leaving you to specify your chosen font in the JavaScript code, which you add into your site.

The only possible problem occurs if a visitor to your website has JavaScript turned off. However, setting a fallback font, as discussed above, will ensure that they at least see something which resembles your chosen font.

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.