Embedding fonts in webpages
Demonstration of a font embedded in a webpage
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 a handwriting 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...
How to embed fonts in webpages
- Find a font. First, find a TrueType font you want to use. I can recommend Larabie Fonts, where there are over 300 free fonts to download. I made my handwriting font for $10 using Fontifier, a service that makes a TrueType font from a scan of your handwriting. You can get a 30 day trial version of Font Creator if you want to design more sophisticated fonts.
- 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:Sean;"> My spidery script... </div>
- To create the embedded font files, you need to download Microsoft's free Web Embedding Fonts Tool (WEFT). It's about 9MB and runs on Windows 98 and later. Microsoft suggests it might work on Apples running PC emulators.
- 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.
- Microsoft Typography on the web includes some good examples of embedded fonts