Created: December 8th 2011
Last updated: May 1st 2020
Categories: Common Web Development
Author: Marcus Fleuti

Add custom fonts to websites

Tags: CSS, Fontsquirrel

Donate with

82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

This article explains how to implement a custom font on your website.
Please note the following:

There are still compatibility issues with older browsers (like IE < Version 7.0)
Not every font can be used for websites because different browsers might interprete fonts differently
Especially free fonts (free of charge) are often incapable for web usage.

Follow these steps to implement a webfont:

1. Generate Font
In order to be able to add a custom TTF font to your webpage you will first have to convert your desired TTF font to a webfont. This can easily be done with an online font generator like Font Squirrel:

http://www.fontsquirrel.com/fontface/generator

2. Upload Font to Webserver
After that you will need to upload the generated files (.eot , .woff, .ttf, .svg) to your a directory on the webserver - e.g. /fonts.
3. Create font-face definition
At last you'll need to create a new font-face definition in the websites' CSS:

@font-face {
    font-family: 'your-font-name';
    src: url('../fonts/your-font-name.eot');
    src: url('../fonts/your-font-name.eot?#iefix') format('embedded-opentype'),
         url('../fonts/your-font-name.woff') format('woff'),
         url('../fonts/your-font-name.ttf') format('truetype'),
         url('../fonts/your-font-name.svg') format('svg');
    font-weight:normal;
    font-style:normal;
}

4. Define dedicated font-faces
If necessary you can define dedicated font-faces for various font-weights or font-styles. This might become handy when a font does not properly support a desired style or weight.
5. Assign font-face to CSS elements
At last you need to define the font for the desired tags (e.g. define it globally in the body tag):