How to Upload New Fonts to KompoZer

Fonts that are rare will not be visible without the @font-face property.

Adding new fonts to your computer makes them available to the applications on your computer, such as the KompoZer Web editing software. Using these new fonts may not be a good idea, however, as Web pages will only display fonts that the end user -- not the page creator -- has downloaded to his computer. If you use an obscure font that most people don't have, it will not be displayed on their browser when viewing your website. There is a way around this, however, using @font-face. This will only work on the latest versions of all modern browsers that support HTML5.

Instructions

Make Fonts Available in KompoZer

1. Download the font you want to include in KompoZer. Many sites offer free downloadable fonts or fonts available for purchase.

2. Save your font file to your desktop to some other easily located directory.

3. Drag the font into the "Control Panel," "Fonts" directory in Windows. On a Mac, drag the file into "Home Folder," "Libraries," "Fonts."

Using @font-face

1. Open the cascading style sheet, or CSS, file of your Web page. If you do not have a CSS file, create a new file and name it "style.css," then provide a link in the "Head" section of your HTML document to this CSS file.

2. Open your font in the @font-face Kit Generator at Font Squirrel to generate the font files you will need (see Resources). To do this, click "Add Fonts," then "Download Your Kit." Upload the ".woff," ".otf" and ".svg" files to your server at your host provider in the same directory as the Web page for which you will use this font.

3. Add the following code into your CSS document, replacing "your typeface" and "filename" with the name of the typeface and file of your font.

   @font-face {

   font-family: "Your typeface";

   src: url("type/filename.eot");

   src: local("?"),

   url("type/filename.woff") format("woff"),

   url("type/filename.otf") format("opentype"),

   url("type/filename.svg#filename") format("svg");

   }

4. Specify what text you want to have this font. In your CSS file, type

   em { font-family: "Your typeface", Georgia, serif; }

   Listing "Georgia" and "serif" will provide backup fonts for browsers that do not support @font-face. In your HTML document, surround the text you want to display this font with opening and closing "em" tags; for example, type "<em>change these words' font</em>" to change the font of those words to your specified font.

References

• Gimp Documentation: Adding Fonts
• Nice Web Type: How to Use CSS @font-face

Resources

• Font Squirrel: @font-face Generator