Putting any font on a web page
One of the really exciting and cool things we’re doing for our new website is building it using HTML5 and CSS3 standards so we can use the @font-face technique to show any font on a web page. Before you switch off because you saw an acronym hang in with us for a minute whilst we explain why this is relevant to you.
- It’s cool. You will be able to choose from an enormous range of fonts to show in your titles and for your text. No more boring Arial, Tahoma and Times New Roman. You can now have a web site that looks glossy and appealing to visitors. The more appealing your site looks the more trust the visitor is going to have in what you’re trying to say to them.
- It’s not a graphical file. You won’t need an expensive graphic design session to make all the words and then find that you can’t change them without paying yet again. The fonts put on a page using what’s called the @font-face technique that is hopefully going to be part of CSS3 are rendered as text, meaning you can change the wording yourself.
- The mobile market is going to be massive. The Apple iPad has already sold over 3 million units and counting. It supports HTML5 and CSS3. With more people expected to view websites on mobile devices than desktops in just a short couple of years you really can’t afford to be behind your more glossy competitors here.
The technique is supported on most modern browsers. We can even get it to work with Internet Explorer. Yes, we were surprised about that too.
Now for the science…
@font-face {
font-family: Base02;
src: url(‘http://c1990232.cdn.cloudfiles.rackspacecloud.com/Base02.ttf’) format(“truetype-aat”),
url(‘http://c1990232.cdn.cloudfiles.rackspacecloud.com/Base02.ttf’) format(“opentype”),
url(‘fonts/Base02.ttf’) format(“truetype-aat”),
url(‘fonts/Base02.ttf’) format(“opentype”);
}
The above code doesn’t deploy the Internet Explorer-friendly solution, but it does do several things.
@font-face allows us to make a new font available. We can have as many of these as we like. One for each glossy font that we’re going to use.
font-family lets us define what it’s called later on in the normal CSS. We can assign the font to multiple CSS selectors.
src is simply where to find the file. We’ve got multiple sources here because we need one truetype, one opentype and because Firefox 3.5 doesn’t allow us to call on fonts that our off-server we’ve provided duplicate localised font files. The idea is that if Firefox allows us to link to our CDN-hosted fonts we’ll drop the extra lines in a later release.
To deploy for Internet Explorer compatibility we would need to convert the font to EOT format and use a special @font-face set of code that doesn’t have the “format” bit in there otherwise Internet Explorer will ignore the whole definition. This is highly annoying because it means we’ve got to have extra lines of code plus different font files to accommodate.
