HTML Tutorials: Embedding 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 W3C
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, Bitstream.
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 here.
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 official
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.
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.
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
|
