How Upload Fonts to Your Server and Display Them on Websites

If you design a webpage using a font that only exists locally on your computer, your site's visitors won't see it unless they too have that font installed on their computers. In order to make the font appear to everyone, you must upload the font to your server and define a new font family in CSS.

As an example, we uploaded this handwriting font to our server. If you are using a major browser, this block of text will appear different from those above and below. (This font is called 'Extrafine' and its creator will let you download it for free from DaFont.)

Uploading a new font to your server and embedding it in your website requires only a few lines of code.

Step 1: Download a new font and save the file to your desktop. If the file is zipped or compressed, extract it. Before using a new font on a public webpage, make sure you have the permission of the creator, as many fonts are copyrighted. Alternatively, you can create a font using FontForge (free) or commercial typesetting software.

Step 2: Create two copies of the font file in .ttf and .eot format if you do not already have them downloaded. The .ttf format is compatible with Chrome, Firefox, Safari, Opera, and IE 9. The .eot (Embedded OpenType) format is necessary for your new font to be displayed properly in IE 8 and below. You can use a font creation program to convert one font file extension to another, or look for a free online conversion program.

Step 3: Upload the font to website in the directory of your choice. If you use many fonts, create a directory called "fonts" to organize them all.

Step 4: Open your CSS file and add these lines at the beginning of the document:

@font-face {
font-family: 'New Font';
src: url(directory_path/newfont.ttf);
}

@font-face {
font-family: 'New Font IE';
src: url(directory_path/newfont.eot);
}

Replace "New Font" with the actual name, and "directory_path" with the actual path to your files. If the font name is more than one word, you need to place quotes or apostrophes around the name. If you are only using the font for a single page, you can place the code between <style></style> tags in the header.

Step 5: In either the CSS file or the webpage, define a new class:

.mynewfont {
font-family: 'New Font', 'New Font IE', backupfont;
line-height:xxx%;
}

Replace "backupfont" with the actual name of your preferred back-up font, such as Verdana, Arial, or Times. The line-height property is optional; some new fonts need the line spacing adjusted. For example, we used a line spacing of 110% to display Extrafine. For best results, test values between 100% and 150%.

To render an entire paragraph or section in the new font, mark it up like this:

<p class="mynewfont">Some text here</p>

© Had2Know 2010