I downloaded the Firefox 3.1 beta this morning to test some newly supported features. One that caught my eye was the css selector @font-face, which allows firefox to display different fonts to the default web fonts. This could mean no more sIFR!!
Out of curiosity, I decided to test this new feature in Safari, IE6 and 7. It worked in Safari….and….IE6! Unfortunately IE7 doesn’t support Open Type (OTF) or True Type (TTF) fonts, so you have to download this nifty bit of software called WEFT to convert it to an Embedded Open Type (EOT) Font. I’ve tried for hours to make it work using this tutorial. But I’ve had no luck whatsoever!
Here is my mini tutorial to use @font-face in Firefox 3.1 beta, IE6 and Safari:
Create a folder and copy this into an html file:
<html>
<head>
<title>Web Font Sample</title>
<style type=”text/css” media=”screen, print”>
@font-face {
font-family: “font”;
src: url(”font.otf”);
}
body { font-family: “font”; font-size: 150px; margin:500px; }
</style>
</head>
<body>
Really?!
</body>
</html>
replacing “font” with a font of your choice. Remember to change .otf to .ttf if you’re using a True Type font. Or replace it with .eot if you managed to convert your font! Place the desired font in the same folder as the html file and open it up in your browser. Good luck!
