CSS3: Custom Fonts using font-face

CSS @font-face

To enable the @font-face you must first copy the TrueType (.ttf) or OpenType (.otf) font file into a directory on your website. For example, includes or scripts directory. Once this file is included within your website, you can now alter your CSS to include a reference to it. In the following example, all <h1> tags will use the Algerian TrueType font:

<style type="text/css">
@font-face {
font-family: 'AlgerianRegular';
src: url('ALGER.ttf') format("truetype");
}
h1 {
font-family: 'AlgerianRegular';
font-size: 18px;
}
</style>

css font-face

If you are trying this example on your own in Internet Explorer, you might notice the above text doesn't look like the Algerian font. The reason being the above example is unfortunately too simple and doesn't currently work in Internet Explorer.

So, if you are unable to get your TrueType or OpenType fonts to work with Internet Explorer, I suggest using this tool provided by the Font Squirrel. On this page, you upload the font file you have and it will generate a toolkit for you.

Using the example above, when the toolkit was generated for the Algerian font, I ended up with the following files:

alger-webfont.eot

alger-webfont.svg

alger-webfont.ttf

alger-webfont.woff

If you now replace the existing ttf file with these files and update your existing @font-face CSS you will have a working custom font in all browsers:

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

Now, our Internet Explorer friends should see this paragraph in the Algerian font.

With the use of the @font-face tag, developers can help please our designer friends and achieve their pretty designs while we developers can still help to ensure quick page load times without the heavy weight of images!

Published on Feb 24, 2019

Tags: The Ultimate CSS Tutorial for Beginner Programmers | font-face