But now there is a little code, which you can use to embed your fonts, so you can be sure your visitor will get to see them. But there is one downside to this technique: only IE4 is capable of parsing this code - other browsers will ignore it.
Before we start, you need to get the following things:
- At least IE 4 (if you don't have it already)
- A Software called MS WEFT
- Some really cheeky fonts you want to use.
Now a little something about the components you downloaded.
First, MS WEFT:
In order to successfully embed the font on your site, you need to create an "Embeddablen Open Type" (.eot) file. That's where WEFT (Web Embedding Fonts Tool) jumps in. It creates those for you!
Last, the cheeky fonts:
This is so you have something to test on. Install the font on your system, then build the site and then delete the font from your PC. Now go over to your site to see if it works - that easy! :-)
Over to business! Once you created the .eot file, we can go over to the CODE!
<STYLE type="text/css">
@font-face {
font-family: MyEmbedFont;
font-style: normal;
font-weight: normal;
src: url(embedfont1.eot);
}
</STYLE> |
You would now use your font like so:
| <FONT face=" MyEmbedFont">Welcome to DEVpapers.com</FONT> |
Now some explanation on the code above (obviously only on the CSS code!)
The "font-family" property is where to type in the font you would like to use. You could also change that value to "Superman" (instead of " MyEmbedFont "), but you would have to change your HTML tags accordingly!
In the "font-style" property you define whether the font is to be "italic", "oblique" or "normal". I chose the latter!
If you want your font to be especially bold or especially light, you can use "bold", "bolder" or "lighter". I again chose normal, 'cause I'm just a normal guy :-)
And now zooming on the most important part! The SRC tells the browser where to find the .eot file you created earlier on with WEFT. Remember to replace the path inside the url()...
One more thing before you go: You need one @font-face for each font you embed!
