Drop a Custom Font in There Using @font-face!

Yep, we’re back to talking fonts again! And this time, it’s all about using the @font-face {} declaration to allow the use of custom fonts in your documents.

This video is incredibly helpful and full of good insights, but you really need to watch it in full screen and in HD to get the most out of it, if you can.

To start off with, you first need to declare what font you plan on using. In this example a font called Abbyeline is chosen. You will then need to specify a source for the font, so it can be found and used. So the code would look like this.

@font-face {
    font-family: abbyeline;
    src: url ( 'Abyyeline.ttf' );
}

So now that your code includes what font you want to use and where to find it, you will need to add it to something relevant. Once you have some text in place, it can be styled. You code will look something like this.

@font-face {
    font-family: abbyeline;
    src: url ( 'Abyyeline.ttf' );
}

#text {
    position: relative;
    width: 800px;
    margin: 30px auto;
    font-family: Abbyeline;
}

Of course, if you want to include further styling it is up to you and the specific project you happen to be working on. But this is the basic concept of how to implement your own custom fonts into a document using CSS .

It is important to make sure you are using proper @font-face syntax, and this video is a bit dated. For the latest updates on this subject check out this helpful post over on FontSpring.com.

If you have found this lesson to be helpful, you should also check out this post on how to use Google Webfonts to embed custom typefaces without the use of the @font-face {} declaration. Thanks for stopping by!