How to replace fonts using CSS3 font-face
Posted on September 5th, 2011 by Glenn Reffin
Font replacement made simple using @font-face
@font-face has been available for a while but with CSS3 used more widely, it is finally being recognised as a viable method of font-replacement.
In previous how-to guides, we have considered SWIFr and Cufon for font replacement. These methods rely on Flash and JavaScript respectively to substitute a web-safe font with a rendered font image. These methods have limitations for user experience. For example, both can cause load-flicker while the replacement font is rendered, Cufon relies on JavaScript being enabled and neither of these methods renders selectable and editable text.
@font-face is a CSS styling method that dismisses these limitations. It does not rely on external programming or rendering engines and the font is rendered with the page by the browser.
Things to bear in mind
As always, check the license agreement for use and distribution of the font you intend to use. Do not use fonts that limit your ability to render or link to the font on the web.
Using linked fonts relies on the availability of the linked server: if Google’s Web Fonts server doesn’t respond or the directory of the font changes, your linked font will not render.
Using web fonts can add loading time because the fonts must be downloaded from a server. Depending on the size and number of fonts being downloaded, this may add significant loading times for pages.
Not all web fonts are designed for use on the screen and have varying quality. You should check replacement fonts for legibility before you use them. As a general rule, avoid hard-to-read fonts and avoid replacement fonts that have small bowls or considerable variation of stroke modulation as these are the most difficult to read on screen.
How to find fonts
There are many libraries available. These tend to fall into two categories — those that provide fonts for you to download and install on your server and those that provide a link to their own font servers. We will take a look at both of these.
Server-based services
Google Web Fonts provides a growing range of fonts available through a link. To use Google’s service, find a font you want to use, select it and view it. You will need to choose the styles and character sets that you want to use (choose only the styles and character sets that you need as additional styles add to loading times).
Select the entire <link> code and copy it to your clipboard.
In the <head> section of your web page, paste the <link> code directly after the opening <head> tag. This is the link to the font provided on Google’s servers.
Next, go to your CSS file and create a font-family:
From the Google font page, copy the code within the CSS panel.
Paste it into your CSS file and build a suitable font style, as required. For example,
h2 {
font-family: 'Bowlby One', arial, sans-serif;
font-size: 2.4em;
color: #900;
margin-top: 3.6em;
line-height: 1.8em;
text-transform: uppercase;
}
Your page text should now render using the replaced font.
Choosing and downloading web fonts to your server
There are many font services available, I am going to use Font Squirrel for this how-to guide because they have a range of commercial-use free fonts available.
When you have chosen your fonts, click on the ‘@font-face kit’ tab on the font details page. Choose a subset to reduce the number of glyphs downloaded and therefore the loading time for your page.
Then choose the font formats. There are four formats available and you need to select all four of them. They are:
TTF (True Type font), which can be rendered by most browsers;
EOT (Embedded Open Type), which is suitable for Internet Explorer;
WOFF (Web Open Font Format), which is the emerging standard for the web;
SVG (Scalable Vector Graphic), which is suitable for iPhones and iPads.
Then press the Download button and you will get a zip file, in which you will find a sample HTML page, a sample CSS file, a copy of the licence and the four font files. From the zip, take the four font files and the licence agreement and put them in a new directory on your server.
Then you need to edit your CSS file. Near the top of the file, you should include the following:
@font-face {
font-family: ‘ChunkFiveRegular’;
src: url('[dir]/Chunkfive-webfont.eot');
src: url('[dir]/Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
url('[dir]/Chunkfive-webfont.woff') format('woff'),
url('[dir]/Chunkfive-webfont.ttf') format('truetype'),
url('[dir]/Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
font-weight: normal;
font-style: normal;
}
If you wanted to use the new font to style your H2 tags, you would write this code in your stylesheet:
h2 {
Font-family: ‘ChunkFiveRegular’, arial, sans-serif;
}
You can view a sample page, using both these methods to render web fonts. This sample page will open in a new browser window.
Glenn Reffin
Latest posts by Glenn Reffin (see all)
- Welcome to the new look - 14 February, 2022
- How to replace fonts using CSS3 font-face - 5 September, 2011
- 5 tips for better web site construction - 16 January, 2011
- 10 tips to write better content - 12 August, 2009
- 6 ways a small business can beat the recession - 29 June, 2009
- Typography