CSS3: Custom Fonts using font-face CSS3: Custom Fonts using font-face

font-face in css

Let me start by saying that I am not a designer, so this feature didn't mean much to me; however, when we told designers that they can start using custom fonts they want ape @$!# for it.

Over the years it has been mentioned countless times how little time you have to capture a person's attention on your website. Often times this can be done with flashy or enticing designs. With this comes increased download times slowing the page load down. Also, many web hosting providers supply a limited bandwidth or charge per GB. Flashy or enticing designs can be costly in both the bandwidth and page load times.

With the ability to embed fonts with CSS3, us web developers, can start pleasing our designers by embedding their custom fonts in the website and stop using images to achieve the same affect.

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;

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:





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

Related Posts

Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article that you just finished reading.


Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.

No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in and improve your skillset with any of the tutorials below.