Clear Stage Search Marketing: Embedding Fonts into Your Website...including Internet Explorer

So you have a website and like most sites, you have a navigation bar. You're thinking about the SEO of the site and would love to use text links instead of an image-based navigation system.

But due to the design of your site, you don't want to be limited to just using the few fonts that are populated into everyones browser.

You might create a CSS code on your site and make you page live via upload to your server. But while it will look great on your computer, the reality is that unless every person viewing you website has that same special font installed on their computer, they will not be viewing the same looking site as yours.

But there are a few things you can do change that.

Using a simple piece of CSS code called @font-face, you can embed the specific font into your webpage. So everyone viewing your page will get the same experience using the same font...in theory.

The code is fairly simple:

The problem that exists is that while modern browsers like Firefox and Chrome accept all the CSS coding you might include, such as adding things like "text-shadow" to give sharpness to your fonts, the dinosaur that is Internet Explorer wont' accept these text effects.

Luckily, there is a workaround.

Embedding Fonts Walk-Through:

Here's a walk-through to embed fonts into your webpages, regardless of the browser being used and be able to use that you'll also be able to use some of the text effects.

1) Play it safe...use .EOT font files instead of .TTF
You can use the code above and just point the font URL source to your .TTF font on your server. But since we're attempting to make your site look the same on Firefox, Chrome and Internet Explorer, we'll go through a few extra steps.

2) Locate the font you want to use.
Go through your fonts folder to find the specific font you want to use on sections of your site.

3) Convert your .TTF font to .EOT.
Using Miscosoft's free software "Microsoft Weft", you can can convert your fonts to .EOT. The software is very clunky though. If you have many fonts that the software is trying to review, the program will routinely crash. This usually happens when it encounters a font on your system that it is unfamiliar with or is overly complicated.

And alternative to converting your .TTF font to .EOT is to just find one that has already been converted. There are a few sites out there that can provide .EOT fonts for free.

4) Upload your font to your server.
This will be the URL address you reference when trying to load the code.

5) Create your CSS code with Text Effects:
You'll need to create CSS code to be included on all pages where you are looking to embed a specific font.
The example below if one I've used for a client. They wanted a text link navigation bar using a specific font. But the font, like many, needed to have a border in order to appear crisp on the page and the background color.

Sample CSS Code:

.sample {font-family: 'xxx;
src: url('xxx.eot');
src: local('?'), url('xxx.woff') format('woff'), url('xxx.ttf') format('truetype'), url('xxx.svg#webfontAOJTPlzn') format('svg');
font-size: 22px;
color: #ffffff;
text-shadow: 3px 3px 7px #111;
filter: glow(color=#666666,strength=1); /* IE */
}

In this code below, there are a few references:

font: xxx (this is just the name of the font in the example)

font-family: name of the font minus the extension

url: wherever the "url" appears, that is where you have the filed uploaded to your server

text-shadow: this is the text effect that give a small border to your font. This is also the effect that does not display in Internet Explorer.

filter: glow: this is the effect that will somewhat mimic the Chrome/Firefox text-shadow effect. Instead, it gives a small border that is very similar to the text-shadow effect. This works in Internet Explorer. So if the user is viewing via Chrome/Firefox they will see the text-shadow effect. But if they are using IE, they will see the "glow" effect.

Other Font Extensions: You'll notice there are a few other font extensions being used int he sample code. If you download a .EOT font from here then you will be given all these versions of the font.

Now just reference the class in your page, and you'll have the specific font embedded into your site for all your visitors...even if they don't have the font installed on their computer.

And note that as I'm not altering the CSS of ClearStage.com just for a working example in this post, the "glow" effect will not likely work on IE. My apologies for not providing an example.