logo
windows 98 Files sql fonts active server pages templates

Embedding fonts into your web-pages

nb. Please note, that the following will only definitely work on Internet Explorer. If in doubt whether this will work on different browsers, please scroll down to the bottom of the page, where an example has been give of embedding fonts into a page.

  1. In order to embed fonts into your web pages, you must convert the fonts to .eot format using a piece of software that you can download from Microsoft. The url is: http://www.microsoft.com/typography/web/embedding/weft3/weft01.htm
  2. When this is downloaded, double-click the file and follow the instructions to install the software.
  3. The first time that you run the software you may get a message asking if it should put into a directory all of your fonts. Click YES
  4. Fill in your name and email address
  5. If you have not already, you should download the font that you would like to use and install it in the c:/windows/fonts directory. In order to follow this example, you may want to download the Kinderfeld font from http://www.acidfonts.com/kfonts5.htm
  6. You should then create a page called fontexample.htm and upload it to your server. It should have on it:

    <font face="Kinderfeld">
    Lord of the Rings

  7. Going back to the software which you downloaded, fill in the link on your server to your fontexample.htm page. eg. http://www.usefulcomputerinfo.com/fonts/fontexample.htm
  8. Click add (it will find the page)
  9. Click next
  10. If you have entered in the details correctly, then there will be a green tick by the name of this new font.
  11. If there is a red cross, then you have made an error. If it just doesn't appear, then you should try adding it manually using the add button
  12. Click next.
  13. Enter the location where the font should be saved. eg. file://c:/windows/fonts
  14. Upload this font to your webspace to the same directory as you are going to have the page with the embedded font
  15. Create your page which you want to have your embedded font on. In order to import the font, you should use CSS and html on the page:

    <HTML>
    <HEAD>
    <style>
    @font-face {
    font-family: Broken15;
    font-style: normal;
    font-weight: normal;
    src: url(KINDERF0.eot);
    }
    .psycho {
    font-family: Broken15, Verdana, 'Small Fonts', sans-serif;
    font-size: 48px;

    }
    </style>
    </HEAD>
    <BODY>
    <span class="psycho">
    Testing A Font</span>
    </BODY>
    </HTML>

  16. When you go to this page, it should hopefully have something like the following:

    Testing A Font

    Sign up for our award-winning newsletter: