Using CSS3 @font-face to Embed Custom Fonts

Using CSS3 @font-face to Embed Custom Fonts

Find a Font

First, you are going to need to find a font to use on your website. It is better to find a font that has every character, including symbols, so that it shows up nicely on your web page. For example, if the font doesn’t have proper exclamation points or quotation marks, then it will get a bit messy. I have chosen to use the font Gill Sans Ultra Bold.

You can find free fonts at these websites:

Or, you can simply Google ‘free fonts’ to find a website that offers free fonts. These are just my favorites. Once you have chosen a font, download it, and save it on your hard drive.

File Conversions

In order to support different browsers, you will need to convert your font file into many different formats, (.ttf/.otf, .eot, .woff, .svg etc.). The easiest way to go about doing this is to use the Font Squirrel @font-face Generator. It’s a free service that will convert your font file into all the necessary formats, and it will even provide you with an .html page, and the CSS to go along with it.

Simply click the + Add Fonts button, and upload the .ttf or .otf file of the font of your choice. Then, by default, the Optimal radio tag will be checked off. This is recommended. Then, agree to the terms of use, and download your font kit.

Uploading the Files & Adding CSS

Once you have downloaded your font kit, create a new folder in the same directory as your stylesheet called ‘fonts’. Then, upload the .eot, .svg, .ttf/.otf, and .woff file formats of your font into the new folder. If you are using WordPress, your font folder should be located in your active theme’s folder.

Then, once you have done that, add this css to your stylesheet.

@font-face {
font-family: 'GillSansUltraBold';
src: url('fonts/gillsans-ultrabold-webfont.eot');
src: url('fonts/gillsans-ultrabold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/gillsans-ultrabold-webfont.woff') format('woff'),
url('fonts/gillsans-ultrabold-webfont.ttf') format('truetype'),
url('fonts/gillsans-ultrabold-webfont.svg#GillSansUltraBold') format('svg');
}

Replace the URLs to match those of your font files. Make sure to include the directory they are located in, (i.e., fonts/gillsans-ultrabold-webfont.eot). If you URLs are not correct, your CSS won’t be able to locate your chosen font.

Using the @font-face Property

Now that you have implemented the @font-face property in your CSS file, you have declared a new font-family. Therefor, you can add the font-family name to any CSS class on your website. Below, I added the font-family, ‘GillSansUltraBold’ to the h1 CSS property.

h1 {
font-family: 'GillSansUltraBold', Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
font-size: 60px;
line-height: 55px;
}

Now, you can add your HTML markup to your website, and the new font will appear.

<h1>Custom Font Family</h1>

Troubleshooting

Make sure your file paths are correct. If your CSS is calling for your font files in a directory they aren’t in, then it won’t be able to locate and properly load the font. In my example above, I have added a folder titled ‘fonts’ in the same directory as my CSS file. Therefor, the proper path would be ‘fonts/gillsans-ultrabold-webfont.eot’.

Make sure your font file names are correct. Alongside creating a URL to the proper directory to locate your font files, make sure the names of the font files in your CSS match those of the actual files. If the file names aren’t the same, then your font files won’t be properly located.

  • Stryker11

    Great tutorial, but I can not find the font on the websites you listed. Where did you download it for free use?

  • Bharath

    Thank you