Dear
Isn't it funny how we spend so
much time working on layout, colours and pictures, but rarely pay any attention
to the text itself?
When we do try to style text,
we inevitably embed it in a picture file. It slows the site down and makes
the text less usable.
If you're using Internet Explorer,
you'll be reading this text in AdineKirnberg-Script font. The effect is achieved
by embedding the font itself in the webpage.
The advantages of embedded fonts
are:
- Content is easy to edit and
dynamically update - if you told me your name, you'll see it above
- You can copy and paste it
- Search engines can spider it
- The browser can enlarge it
- It's fast - this whole font
was only 8kb and it's cached now
- No need for alt tags!
In this tutorial, I'll show you
how to embed fonts in your own website.
I'll sign off now, by allowing
myself one embedded image...
-
Find a font. First, find a TrueType Font font you want to use. I can recommend
Larabie Fonts, where there are over
300 free fonts to download.
-
Install your font. To do this, you just drag the font's ttf file into the
computer's fonts folder. You can find this in the control panel.
-
Test your font. The default fonts supplied with computers are optimised
for reading long tracts of text on screen. If you want to change your website's
body copy, choose carefully. If your font is installed correctly, you should
be able to format text using the font in Microsoft Word or other word processing
packages you have on your system.
-
Use your font in your webpage. You'll need to use code similar to this,
but remember the font name might not be the same as the font's filename:
<div style="font-family:Hollyecho;"> Something
Funky... </div>
-
-
Install and run WEFT. The first time it runs it will scan the computer for
installed fonts.
-
If you've closed WEFT and come back to it, click on the Wizard button. First
time it starts automatically. You'll be asked for your name and email address.
This will end up on your webpages that use the fonts unless you edit it out
again, so enter a spam-safe email address.
-
Tell WEFT which HTML pages you want to use embedded fonts on. These should
be the pages you've already styled in step 4 above. When I tried it, the feature
to spider links from the first page didn't work.
-
WEFT will analyse your webpages to see which fonts they use and whether
they can be embedded or not. The embedded font files (EOT files) can be set
to only include the characters you're using. This is called subsetting. You
can see which characters are included for each font by clicking on the subset
button. If you want to be able to update text in future, it's a good idea
not to use any subsetting. Otherwise you might find your font file doesn't
have all the characters you later need.
-
The tool lets you define which webpages or websites are allowed to use the
font so you can share fonts between your sites while blocking others from
snaffling your bandwidth. You can have a maximum of three paths.
-
Back up your webpages. WEFT will add code to them to reference the font
files.
-
Create the font objects. Your EOT files will be created and your webpages
will be updated to refer to them.
-
Test it - Uninstall your custom font by removing it from the fonts folder
in the control panel again. Upload your webpage and the associated EOT file.
Visit it using IE. If you can see the font on screen, it's worked! If not,
check first of all that you haven't blocked font downloading in your security
settings in Internet Explorer.
