How to make any font web safe using @font-face
Images for typography
Web designers and developers have settled on using web-safe fonts as body text in our mockups. We have reverted to incorporating beautiful typography into images, specifying some alt tags, and hoping search engines index the text. However, CSS and browsers have been capable of rendering custom, live, selectable text for a long time now; it just needs to be done correctly. Solutions like sIFR and Cufón are available and work well, but they rely on extra JavaScript to function.
@font-face for Custom Web Safe Fonts
The concept of @font-face is not new, but there tends to be a biased opinion that fonts will not work in all browsers. This is a common misconception. The true culprit is not the support of @font-face but the file types being used and the order they are called in the stylesheet.
Generate font file types
To begin, we need to generate the correct file types for each browser. The best tool we’ve come across is Font Squirrel’s @font-face generator. Just add your fonts, use the easy option, agree to the terms, and download your type kit.
Download a free kit
You can alternatively download one of hundreds of premade @font-face kits. Font Squirrel says these are all free and ready for commercial use in your websites.
Demo
Below, you can see various sizes of the slab serif font ChunkFive. Once loaded with @font-face, it can be controlled with CSS just like any other font.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat, lorem a ultrices consequat; risus mi rhoncus nisl, sit amet pellentesque mi lorem sed neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat, lorem a ultrices consequat; risus mi rhoncus nisl, sit amet pellentesque mi lorem sed neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat, lorem a ultrices consequat; risus mi rhoncus nisl, sit amet pellentesque mi lorem sed neque.
Stylesheet markup
In this example, we use the ChunkFive slab serif font. We have placed the font files into a directory called type, which is reflected below. Just use the @font-face selector and call the source URLs in the following order to ensure browser support. After that, reference the font as normal using the font-family selector and supply color, font-size, and other styling as needed.
@font-face {
font-family: 'ChunkFiveRegular';
src: url('type/Chunkfive-webfont.eot');
src: local(' '), url('type/Chunkfive-webfont.woff') format('woff'), url('type/Chunkfive-webfont.ttf') format('truetype'), url('type/Chunkfive-webfont.svg#webfontb5K2fJwj') format('svg');
font-weight: normal;
font-style: normal;
}
p.chunk {font-family: 'ChunkFiveRegular';}
p.one {font-size: 1em; line-height: 1.5em;}
p.two {font-size: 2.5em; line-height: 1.25em; color: red;}
p.three {font-size: 4em; line-height: 1.15em;}
IE6 example
Here’s an example of this technique working in Internet Explorer 6:
Leave a Reply
Want to join the discussion?Feel free to contribute!