Adding Custom Web Fonts to Your Web Site Using CSS Font-Face

Adding custom web fonts to your website is one of those things that seems like it should be easier than it actually is. In this video tutorial, we’ll walk through how to add a custom font to your website using the FontSquirrel.com Web Font Generator. Let’s Get Started:

Additional Information

Let’s look further into the CSS @font-face rule generated by FontSquirrel:

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

The top line of the @font-face rule is “font-family”. This is the name we are assigning to our custom font. It can be anything we choose. If we wanted, we could rename the font to something easier to remember and use that throughout our CSS.

For Example:

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

body{
    font-family: 'SSRegular';
}

The @font-face rule also links to several different font files. These different font files are used for different browsers and devices. FontSquirrel creates the url to these fonts relative to the CSS file using the font. This means that if we place the font files in a different location other than in the same directory as our CSS file, we need to change the relative paths to match that location.

Finding Web Fonts

If you are looking for free fonts to use on your website, I believe the best two resources are FontSquirrel and Google Fonts. Fonts on these websites should be free for anyone to use; however, be sure to read over the license information to be 100% sure.

Resources

If you would like to read more about @font-face, Paul Irish has a great write-up called Bulletproof @font-face Syntax.

Also, Six Revisions has a great article called The Essential Guide to @font-face which goes much deeper into the @font-face syntax and font file types.