Learn how to position images in HTML.
@font-face {
font-family: Broken15;
font-style: normal;
font-weight: normal;
src: url(BROKEN0.eot);
}
.psycho {
font-family: Broken15, Verdana, 'Small Fonts', sans-serif;
font-size: 48px;
color: #000099;
}
]]>
embedding font, tutorial, fonts, eot, text, pixel, font, embed, include, html, web page, automatic, generationEmbedding Fonts
At times you may want to use fonts other than the likes of Arial, Verdana,
Times New Roman, and other mainstream fonts installed on most computers
today. To implement special fonts on a web page, your choices are to either
use high bandwidth-consuming images or embed the fonts.
Embedding fonts
is a very efficient and easy process, however support for doing so is still
not as widespread as we would like. Right now, embedding fonts the way this
tutorial describes is only compatible with Internet Explorer 4 and above
(according to http://www.w3schools.com/browsers/browsers_stats.aspW3C
Schools, 93% of internet users use IE4+ as of October 2002). This method
converts a common True Type Font to the Embedded Open Type format (.eot
files) which allows fonts to be downloaded and only used on specific web
domains. Netscape 4 as well as Internet Explorer 4 and above also support
embedding fonts in TrueDoc format (.pfr files), but since 1998, support
for this format has eroded heavily. Encoding fonts in this format requires
the purchase of expensive software that is being phased out by many of its
developers, including its creator, http://www.bitstream.com/categories/products/webfonttools/webfontmaker/index.htmlBitstream.
So, that leaves us with just EOT, a slightly inferior format that was created
by Microsoft and works beautifully with Internet Explorer. Let's get started.
First, you need to download the latest version of WEFT http://groups.msn.com/MicrosoftWEFTuserscommunity/_homepage.msnw?pgmarket=en-ushere. WEFT is a free program written by Microsoft to encode normal TrueType or Postscript fonts into the .eot format. For more information about WEFT you may want to visit its http://www.microsoft.com/typography/web/embedding/weft3official homepage.
WEFT is a surprisingly powerful program that can do things such as examine an already existing web page and create a .eot file containing all the fonts used on it. For this tutorial, however, we'll just stick to the basics of how to embed a single font. Open up WEFT, close the Add Web Pages pop-up if it should open, and go to Tools>Fonts to Embed. Click on Add and choose the font that you would like to embed. The default settings for the rest of the options are fine. I chose to embed Broken 15, a font available on Spoono in the Grungy Fonts section.
pict1.gif540396
Hit Close and click on the Embed button on the top toolbar. Choose a location were the .eot file is to be saved and click Edit to enter a domain name where the font can be used. The default options are fine for the three checkboxes.
pict2.gif540396
Click on Finish and like magic, your .eot file will be created. The sleekest way to embed your font in a web page is by loading it in a .css file. If you already have a .css file for the page, open that. Otherwise, open a blank text file and save it afterwards with a .css extension. Type the following in your .css file:
@font-face {
font-family: Broken15;
font-style: normal;
font-weight: normal;
src: url(BROKEN0.eot);
}
]]>
Notice that the last attribute points to the location of the .eot file the I
created before. Enter your file there, and also write a name to give the font
in the font-family attribute. You may call it whatever you want. Next, create
a class that makes use of your font in your .css file by typing something like
this:
.psycho {
font-family: Broken15, Verdana, 'Small Fonts', sans-serif;
font-size: 48px;
color: #000099;
}
]]>
The attributes are self-explanatory Notice that additional fonts have been defined
for browsers...cough...Netscape...that aren't compatible with EOT. Also, if
your font has a space in its name, you should include single quotes around it,
like Small Fonts has above.
Save your .css file and upload it along with your .eot file to the same directory on your web site. Now any time you use your class in a web page, the embedding font will be used. In my case, <p class="psycho">This Looks Embedded to Me</p> ]]> produces:
This Looks Embedded to Me ]]>