Well, most probably you have got the idea on how to embed your own font into your site. In this tutorial I'll elaborate a bit more detail on how to use CSS @font-face property to embed you font into your site. This is the way I'm learned and I did a bit tweak to suit my requirement, and you could try this and manipulate to suit your requirement.
Well, enough with the chit chat, lets us jump into action. :)
For Safari, Firefox, Chrome and Opera
Step 1
You need to define the font that you are going to use. In this tutorial, I've decided to us Graublab Web font, and I have downloaded it from
here.
Step 2
Once the download completed, you'll see your folder structure like this,
Then you need to copy the all of the files and paste it into your site folder, it is approciate if you could just copy the folder into your site. For exmaple this in my folder structure.
Step 3
Now open your favorite text editor or any IDE that known to you, and paste this into a new CSS file.
@font-face{
font-family: GraublauWeb;
src: url('../GraublauSansWeb/GraublauWeb.otf') format('opentype');
}
@font-face{
font-family: GraublauWebBold;
src: url('../GraublauSansWeb/GraublauWebBold.otf') format('opentype');
}
Step 4
Now you need to assign your HTML element that you want the font to affected to, like this:
h3 {
font-family:GraublauWebBold, Verdana, Arial, Helvetica, sans-serif;
color:#131313;
}
p {
font-family:GraublauWeb,Verdana, Arial, Helvetica, sans-serif;
}
Once you have finished, just launch your browser and see the result. Ok, let's jump to the IE version.
IE Version.
The reason behind this is because IE does not support (.OTF) format, so we need to convert the .OTF into .EOT. You could convert your font
here.
One you have convert and download the font, you should get the file structure in the downloaded folder like this:
If you could see, the folder also included a CSS file, you also could use this file which already made to compatible with all browser ... kind of cute, rite .... :) Once you have done, just create a new CSS file and named it ie.css.
@charset "UTF-8";
/* CSS Document */
@font-face{
font-family: GraublauWeb;
src: url('../GraublauSansWeb/GraublauWeb.eot');
}
@font-face{
font-family: GraublauWebBold;
src: url('../GraublauSansWeb/GraublauWebBold.eot');
}
So, it's done. I hope this tutorial will help some us who are trying to more creative design in our web design. Should you need more information, just write to me @ fudadesignz[at]gmail.com.
Cheers!!!!
Related Links
