CoreyMS

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.