Using different Web Fonts for your next Web Design?
Fonts have enjoyed a resurgence in interest in the last few years. We used to really only be able to choose from a few fonts that were standard on users’ machines, but with speedier connections, using web fonts has opened up to allow a vast array of font choices. Let’s get our heads around how it all works.
A brief history of web fonts
Browsers previously relied upon whatever fonts were installed on the user’s computer. This allowed only plain text to be downloaded, with the browser then loading whatever font – or an alternative font – that was prescribed in the html or css. Microsoft released a set of fonts with an open licence for use on the web, resulting in these fonts becoming widely used. Arial, Georgia, Verdana and Times New Roman became the font-palette most used – resulting in the internet largely consisting of the aesthetic of these fonts.
Other fancier fonts could be used but certainly at the designer’s peril. Often using different fonts meant that webpages containing unique fonts would look like hieroglyphics on many people’s browsers.
CSS2 introduced the @font-face rule, which allowed remote downloading of fonts stored on the web. Officially released in 2007, this has been gradually adopted as internet speeds have increased to reduce page-loading times within acceptable limits. In fact, this extra page-loading time has, until recently, discouraged many developers from fully utilising the tool.
The ability to embed fonts remotely opened up a new legal issue over the licensing of web fonts – how do font designers ensure that the fonts they licence only remain in use on the licensed site? This question has led to a couple of notably free font providers, with an EULA (End-User Licence Agreement) specifying free use on the web.
@font-face is the CSS rule where you stipulate which font, and where from, is downloaded. Basically you would do it like this:
- Upload the font to a folder on your server
- In your CSS file, the following command:
src: url(‘webfont.eot’); /* IE9 Compat Modes */
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
url(‘webfont.woff’) format(‘woff’), /* Modern Browsers */
url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */
Why would you style your web font this way? Basically it sets up the normal font MyFont and points to it’s location for the browser to download. If you want to then stipulate which font to be used for bold, italic, or any other weights and styles, use the same thing with the relevant weight or style included, for example:
src: url(‘webfont-bold.eot’); /* IE9 Compat Modes */
src: url(”webfont-bold.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
url(”webfont-bold.woff’) format(‘woff’), /* Modern Browsers */
url(”webfont-bold.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(”webfont-bold.svg#svgFontName’) format(‘svg’); /* Legacy iOS */
…and so on for all the font types.
If you don’t have a particular font style type to load, but try and use it in your website, then the browser will attempt to make one for you by applying a faux style. Which can be useful, or limiting, depending on how much you trust the user’s browser to get it right.
We then call the font-family as usual in our class definitions:
font-family: MyFont, sans-serif;
So far we have included four font formats within our @font-face statement: eot, ttf, woff and svg. In today’s competitive browser world, different browsers can display different font types:
- Internet Explorer: EOT
- Mozilla: OTF and TTF
- Safari and Opera: OTF, TTF and SVG
- Chrome: TTF and SVG.
What’s the difference? In practical terms the difference is what the browsers display – and most designers won’t need to know more than that. But briefly:
It begins with TTF (True-Type) and OTF (Open Type Font) fonts. The fonts we’re familiar with in our word processing. TTF fonts though have no protection from copying or embedding and so font developers came up with EOT (Embedded Open-Type), which is designed with embedded commands to prevent copying.
SVG (Scalable Vector Graphics) fonts are fonts that have been converted into the SVG format – a web graphics format beyond the scope of this article.
Many font hosts will provide a multiple of versions of web fonts to cater for the different browsers in use. There are both free and commercial font hosting services from which you can either purchase/download the fonts you want to use and copy them to your own server, or download the font directly from the service itself as the page loads. Font hosts will provide an EULA (End User Licence Agreement) as part of the download, offering a great variety of fonts to use in your website and protecting font developers from font piracy. Some common font services are:
…to name but a few.
Web fonts have helped transform the web into a place of creative aesthetic as well as information. Even though designers still need to cater for browser competitiveness, it’s worth it for a few extra lines of CSS to take websites to the next level of individual character.
In a future article we’ll write on how best to manage the slower load time from using different fonts.