about @font-face and how to embed font in css file
The @font-face is not exactly a CSS3 new feature due to it was proposed for CSS2 and is has been implemented in IE since the version 5.
However, this feature allows designers and developers to use any font family even if the user who is visiting their site does not have it installed on his/her computer.
In order to use this feature the first thing that you need to do is name the font and also put its path. For example:
@font-face {
font-family: 'CalligraphyFLFRegular';
src: url('CalligraphyFLF.eot');
src: local('CalligraphyFLF'), local('CalligraphyFLF'),
url('CalligraphyFLF.woff') format('woff'),
url('CalligraphyFLF.ttf') format('truetype'),
url('CalligraphyFLF.svg#CalligraphyFLF') format('svg');
}
In the first line we start with @font-face. In the second line we put a name to our font, in this case we named it CalligraphyFLFRegular. The local means ‘first check if the font is already installed’ and finally if it is not installed we list the formats that are able and the path of each format. As each browser needs a specific format the browser just get the format the it needs and renders it correctly.
It is very simple.
How to apply imported fonts with CSS selectors
Now we need to apply this font-face in our style:
h1 {
font: 60px/68px 'CalligraphyFLFRegular', Arial, sans-serif;letter-spacing: 0
}
Did you realize that the fist name font-family name is the same that we defined at the @font-face?
That is it.
Compatibility
Take a look at the @font-face browser support.
@font-face kit
If you visit the Font Squirrel site you’ll see that each font has a button named “Download @font-face kit”.
If you download the kit you’ll have all the formats that you need to start to use real fonts on the web.
Even better, if you need you can upload your font family and this site will generate the ‘@font-face kit’ to you.
Embedding the font in CSS file
Almost all fonts are protected by copyright and very few of them allow for linking via CSS or redistribution on the web. It may be a problem to put the font file on line because if you use the @font-face { src url(…)} you allow your visitors to download the font.
There is a technique that allows you to embed the font in a CSS file. It is almost the same idea of embed the image in HTML file.
To do this example I had to convert the font with the woff extension to a base64 string. In this example I converted the font Calligraphy by using the PHP function base_encode:
<?php echo base64_encode(file_get_contents("CalligraphyFLF.woff")); ?>
After that I put this base 64 string in my CSS file:
@font-face {
font-family: "Calligraphy";
src: url(data:font/woff;base64,THE_BASE64_STRING_HERE)
font-style: normal;
font-variant: normal;
font-weight: 400;
}
See a demo: @font-face – embedding the font in CSS file.
Unfortunately up until now this example works only in the Firefox browser.
But, don’t worried about it, there is a solution to fix that, the Typekit. The propose of this site is to serves the font that you need to make your site more beautiful. You just need to configure the font and paste a few lines of code in your web site.
Here you can see good explanation about how it works: Getting Started with Typekit.
If you have any doubt or suggestion, feel free to comment.
Comments
Leave a Reply