In CSS2 a way to bring in fonts was introduced. The great @Font-Face command. Using @Font-Face your able to link directly to fonts and use them in your stylesheet and website. As simple as:
@font-face {
font-family: "fontname";
src: url("http://www.example.com/fonts/fontname.ttf")
format("truetype");
}
h3 {
font-family: "fontname", sans-serif;
}
Rather than using static images or non-functional images @font-face allowed you to link directly to any font you wished. Be it remote of locally stored. The retrieved font could be rendered right to HTML text. And not just for H1 headline tags, but for any body copy as well. It’s a great idea, except:
- Unless they are specifically licensed for web use (and most fonts are not), if you embed fonts you own on a web page, you are likely violating your End User Licensing Agreement (EULA) with the font foundry (which is frowned upon and could leave you in a heap of trouble).
- While Safari, Chrome, Opera, and Firefox 3.5 support
@font-facefor TrueType (TTF) and OpenType (OTF) fonts, Internet Explorer does not. Instead, Microsoft supports@font-faceonly for the Embedded OpenType (EOT) format—which Microsoft itself invented. EOT discourages the copying of copyrighted font files via encryption, “subsetting” (using only needed characters rather than the entire font), and other techniques. EOT is a great alternative and in theory a service that delivered EOT and a licensed library of fonts would be great however the available fonts would be greatly limited, and the service would need to rely on CSS Font-Stack Methods.
FontMeUp uses a different approach that doesn’t embed these fonts in the browser, however it allows the text to perform like a traditional font. Click here to learn more about FontMeUp.
