How to Embed TTF Fonts in CSS

Embedded fonts are nothing new to Web design. Though font-replacement techniques such as Cufon and sIFR came into use around 2008, CSS font embedding is a feature that rolled out with CSS2 and is compatible with Internet Explorer as far back as version five. The technique requires you to upload the font, be it TrueType or another format, and then create an "@font-face" rule in CSS. Once that is done, you can reference the embedded font the same way you reference Web-safe fonts.

Open the HTML file for the Web page where you wish to display the embedded font. For websites or templates using a separate header file, open that instead. Use a code-editing program such as Notepad++, jEdit or BBEdit. Look for the following line of code in the top of your HTML file:

Look at the name of the .CSS file referenced in the <link> tag and open that file in your code editor. If you see no <link> tag, create one and then create a blank .CSS file.

Add the following code at the top of your .CSS file:

@font-face {

font-family: 'Font Name Here';

src: URL('fontfile.ttf') format ('ttf');

}

Give a font family name to your font. You can use any name, but stick with a name that is easy to type and remember. Type the full or relative path to your .TTF file between the parentheses after "URL."

Use the embedded font as you would use a Web-safe font such as Arial, Helvetica or Georgia. Here is an example:

h1 {

font-family: "Font Name Here", "Another Font", generic;

}

The above code makes all <h1> tags use your embedded font. Should the embedded font not work, the browser will use "Another Font" for level-one headers. In the case "Another Font" does not exist on the user's computer, the browser goes to the last font. Use a generic family name here such as "serif" and "sans-serif."

Upload your font using an FTP tool. If you do not use FTP, you can also log into your Web hosting control panel and then navigate to your file management tool. Most Web hosts offer this tool, which allows you to upload a few files at a time through your browser.

Tips & Warnings

Use Google Web Fonts to pick a font, copy the <link> tag for a special style sheet hosted on Google's servers and grab the code to include in your own .CSS file. This is an easy way to "embed" a font without hosting it on your own server.

Use a font-replacement technique such as sIFR or Cufon if your chosen font looks too jagged or sharp when embedded. These techniques use scripts that add anti-aliasing to the fonts to soften their edges.

Do not use fonts without first reading their terms of use. Not all fonts are free to use on the Internet, even if you downloaded them for free. Some stipulate you can use the font on a non-commercial site only.