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 your type kit at Font Squirrel

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:
@font-face IE6 example

References

1 reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *