Within CSS3 we have the ability to embed our own fonts within our website. Opening ourselves to a wide range of fonts and avoiding the restrictions of the fonts themselves that are defined in the CSS.
This will give us great power, since we will simply have to generate text and apply the new typography to them thanks to the ability to embed our own fonts and we will not have to resort to solutions such as integrating fonts with images. We will have a lighter website.
The first thing we have to do is have a font. Supported extensions are TrueType (.ttf), OpenType (.otf) and Scalable Vector Grapgichs (.svg).
Thus, our font chosen for the example of embedding fonts in CSS3 is NisePico.ttf.
The rule that we have to put in CSS3 to embed our font is @font-face. What this rule does is define the name of our font and indicate where said font is downloaded from. Thus the code will be the following:
@font-face {
font-family: 'NisePico';
src: url('NisePico.ttf');
}
We can now simply use the NisePico font within any use of the font in our CSS. So, for example, we can define the following style.
.source1 {
font: 40px 'NisePico', Arial, sans-serif;;
color:red;
letter-spacing: 0;
text-align:center;
text-shadow: 3px 3px 7px #111;
}
What we will assign to the class of any element:
This is a NisePicO font
Although embedding fonts in CSS3 is very powerful, we have to be careful to check that the browsers on which we deploy our development have the capacity to interpret the @font-face.
Support can be found from Internet Explorer 9, Firefox 6, Chrome 13, Safari 3.2 and Opera 11 onwards.