Embedded fonts are almost a reality in web development. All the modern browsers support the @font-face attribute. Microsoft gets a lot of criticism for innovation, but they have had this ability since 1997 in Internet Explorer 4.0. Unfortunately, they do not simply let you use a TTF font or an OTF font. It uses an EOT file.
The key to embedding fonts is to use the @font-face css rule.
@font-face {
font-family: "myfontname";
src: url(myfont.ttf) format("truetype");
}
Once you’ve added this, you can simply use your font as you would any other font.
<p style="font-family:myfontname">My font name looks like this</p>
It is really simple…
EXCEPT
If you happen to choose a free font that is similarly named, you will run into troubles using Google Chrome. I chose a font called Dakota that is almost identical to Handwriting Dakota on my Mac. When I installed this font to try it out, my Mac warned me that it was a duplicate font, except the menu tool to remove duplicates was disabled. No matter what I tried, I could not get it to work in Chrome. Safari and Firefox both worked just fine. The only way I could fix it was to edit the font and change the name. I used the free tool Font Forge to do this. While I was in the font, I had to fix a bunch of issues with the font and I changed the name to Dakkota. Once I did that, I got it working in all three browsers on my Mac.
Tomorrow, I’m going to tackle IE and the EOT file format…
Post a Comment