It's Sean!

UK freelance journalist, author
and writer Sean McManus

Printed from www.sean.co.uk. © Sean McManus.
Home > Articles > Webmaster resources > Embedding fonts

Embedding fonts in webpages

Sean McManus explains how to embed fonts in webpages for Internet Explorer. The technique doesn't work in other browsers (including Firefox), but unlike sending text in an image, it degrades gracefully to text-only systems.

Demonstration of a font embedded in a webpage

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 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...

Sean signature

How to embed fonts in webpages

  1. 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.
  2. 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.
  3. 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.
  4. 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>
  5. 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.
  6. Install and run WEFT. The first time it runs it will scan the computer for installed fonts.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. Back up your webpages. WEFT will add code to them to reference the font files.
  12. Create the font objects. Your EOT files will be created and your webpages will be updated to refer to them.
  13. 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.

Related links

Books by Sean McManus

Scratch Programming in Easy Steps

Scratch Programming in Easy Steps

Raspberry Pi For Dummies

Raspberry Pi For Dummies

Learn to program with the Scratch programming language, widely used in schools and colleges.

Set up your Pi, master Linux, learn Scratch and Python, and create your own electronics projects.

Coder Academy

Coder Academy

Cool Scratch Projects in Easy Steps

Cool Scratch Projects in Easy Steps

Learn to make games and other programs in Scratch 2.0, and make a web page in HTML, with this highly interactive book for 7-10 year olds.

Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!

More books

Recommended articles

Stylised coloured photo of a synth

Discover my music and home recording articles

Interested in starting home recording? Follow me as I start recording, using instruments such as the Novation MiniNova and Korg Kaossilator, and share my synth and sample-based music online.

Scratch cat and rainbow circle

10-block demos for Scratch programming

Lots of people of all ages are learning to program with Scratch. Discover some useful tricks and techniques in my 10-block Scratch demos, including special effects you can drop into your games.

Paper Raspberry Pi case

Download free book chapters and more!

Download a free case for your Raspberry Pi, and free chapters from my books about the Raspberry Pi, Scratch, web design and more!

©Sean McManus. www.sean.co.uk.