Tutorial @ Fuda Design

Well, this morning one of my formal colleague did asked me how that we could embed another font into your site and assuming that the user's machine did not have the font installed in their machine.

Actually we can achieve that by usign javascript or flash (like SiFR) but why you need to hassle yourself when you could achieve it with just a few line of codes. Thanks to CSS @font-face, I did one asking myself about this, and what that iI found out that it's really simple to do it.

Well, lets jump into some small tutorial.

Step 1

The first to do is to have your font to be included into your root folder, and you must make sure that you're not illegally use the font, cause some font are copyrighted. It it is, please seek permission from the author and also include the license or agreement into the same folder with your font.

Step 2

You need to add this line codes into your CSS file or possible you create an external CSS file for easier maintenance... :)

@font-face {
font-family: Tahoma;
src: url("path-to-the-font-file/Tahoma.otf") format("opentype");
}
@font-face {
font-family: Tahoma;
font-weight: bold;
src: url("path-to-the-font-file/Tahoma.otf") format("opentype");
}

Then you need to add the font-family wot which element that you want it to be like this:

h1 {
font-family: Tahoma, Helvetica, Verdana, Sans-Serif;
}

Note:

For Internet Explorer, it only support font in EOT to work with @font-face. So you need to write your CSS like this:

<!--[if IE]>
<style type="text/css" media="screen">

@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.eot');
}

</style>
<![endif]-->

Explanation

• @font-face, this the CSS property will used to set font type that are going to be used.
• font-family, the type of font that are going to be used.
• src, this the path to your font source. It could be form another site or from your own in the root folder.

Once you have completed, it is done. So, do play around with this so that you could achieve your desired look and feel for your site. Don't forget to look some of the resources link for further understanding.

Cheers!!!!

Related Links

• Beautiful Fonts With @Font-Face
• The Potential of Web Typography
• CSS @ Ten: The Next Big Thing
• The @font-face Rule
• Fonts Available For @font-face Embedding
• Using @font-face
• Cross Browser Font Embedding With The CSS3 @font-face Selector

Source of tutorials:

21 Awesome @font-face Embeddable Typefaces