Embedding Fonts In Web Page.
Recently i have faced few problem with commercial fonts or dynamic fonts in one of my project.Dynamic fonts are font style files that download right along with the page that will use them.Think of them as an image. That’s the basic concept. When you use these fonts, the font file will download into your cache just like an image. Once there, as long as you don’t clear your cache completely, the font will be there for all future visits. It is fun to watch the page the first time you use these fonts. The page will come in fully with the text in the default format. Then, once the font, or fonts, download, the entire page reloads and comes to life. It’s a great effect.
Tell me, how can i integrate it with my web page?
The first method i found is creating a special type of font files with extension “.eot” and storing it in the server. then we include the font reference in the style sheet. A drawback of this method is, this will work only in Internet Explorer. To convert the font to eot fonts, microsoft is providing a free software called WEFT(Web Embedding Fonts Tool). The WEFT tool includes various features and options to help you create font objects and link them to your Web pages and sites. WEFT provides an excellent wizard-’WEFT wizard’ for easily embedding fonts with web pages.
Here is the steps for do it.
- Prepare an EOT for the font you wish to embed using Microsoft’s Web Embedding Font Tool (WEFT).
- Prepare the web page using any fonts that are installed on your platform
- Link the EOT to the web page. This is done with a @font-face selector in a STYLE specification
<HEAD>
<TITLE>My Page</TITLE>
<STYLE TYPE="text/css">
<!--
@font-face {
font-family: Tikkana;
font-style: normal;
font-weight: normal;
src: url(/fonts/Tkn1_2__.eot);
}
-->
</STYLE>
</HEAD>
hmmmm, What about firefox and others?
As i mentioned above the drawback of .eot files is that, it will work only in Internet Explorer.
so i have checked for other alternatives. and i found the second method.
The second method is PFR fonts. The font has to be in a format known as Portable Font
Resource, or PFR.PFR (Portable Font Resource) is defined by Bitstream Inc.
obviously The next question is most likely, “Where do I get these things?”.
I found a few places, but not a lot. Prepare a PFR ( Portable Font Resource) for the font you wish to embed using several tools such as HexWeb typography.
Reference
http://www.microsoft.com/typography/default.mspx
http://morovia.com/font/support/embed-font-web.asp
Filed under: Css