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