In this day and age we all want to be seen as unique, so why should our websites be any different. As you know fonts for websites can be very restrictive, so why not break the bond that binds us to web-safe fonts and be creative.
@font-face, not specifically unique to CSS3, gives the designer/developer the freedom to use which ever font they choose, as long as it is legally allowed for use, so make sure it has a web-font license. This tutorial will help you understand how to do this effectively.
Ok so where do we start, well you can either create your own font, using Illustrator or something similar or you can search for a font on the web. I suggest a site like fontsquirrel.com simply because they have everything you need to get started. They have a huge database of fonts and will convert them into all the different file types you need.
Lets talk about the different file types you will need for this to work on multiple browsers, below you will find a list of the various files and the browsers they work with.
The code below shows you how to implement font-face into your CSS file but we will need to look into this code a little deeper. We will need to give our new font a name and this can be seen on line 2, you can name this anything you want and is exactly the same as you would call a web-safe font. On lines 3 - 6 you will see were we reference the source files for the fonts, these are separated by using commas. This is just very basic code to get it to work, you can also use additional features such as font-weight, font-style and any others if you choose to.
@font-face {
font-family: 'JosefinSlabSemiBold';
src: url('font/JosefinSlab-SemiBold-webfont.eot?') format('eot'),
url('font/JosefinSlab-SemiBold-webfont.woff') format('woff'),
url('font/JosefinSlab-SemiBold-webfont.ttf') format('truetype'),
url('font/JosefinSlab-SemiBold-webfont.svg#webfontyVaaX3CG') format('svg');
}
To create different font weights you will have to create/download multiple versions of the font and reference them in the same way, below is a simple demonstration on how to this. I have stripped out the majority of the file types because you have seen them in the above example. As you can see one of the fonts is in bold whilst the other is semibold.
@font-face {
font-family: 'JosefinSlabSemiBold';
src: url('font/JosefinSlab-SemiBold-webfont.eot?') format('eot');
}
@font-face {
font-family: 'JosefinSlabBold';
src: url('font/JosefinSlab-Bold-webfont.eot?') format('eot');
}
The following code shows you how to reference your new font in individual sections such as h1, p and anything else you choose to use it with.
Below references the h1 tag in bold and the h2 tag in semibold.
h1 {
font-family: 'JosefinSlabBold', Arial, sans-serif;
font-size:17px;
}
h2 {
font-family: 'JosefinSlabSemiBold', Arial, sans-serif;
font-size:17px;
}
As you can see it is exactly the same as you would normally call a font-family, I would also add similar web-safe fonts after the customised font just in case it fails and then it covers your back if anything does go wrong.
I hope this tutorial has been helpful, if I have missed anything that you may want to know just get in touch and I will add it.
This entry was posted in CSS3 and tagged @font-face, css, tutorials.