font-face

Generate Web-Safe Fonts When Using @font-face

One of the biggest mistakes I see with people just getting introduced to the CSS3 @font-face selector is the use of regular OTF or TTF fonts in their web pages, instead of the recommended WOFF (Web Open Font Format)and EOT (Embeddable OpenType) font formats. With traditional font formats (TTF, OTF), the primary use was for print and applications that created such documents. There were no worries about compatibility across different browsers like there are when creating websites.

Quick Tip: Always Generate Web-Safe Fonts When Using @font-face

Now with the large adoption of @font-face, web designers and developers have to worry about each browser viewers of their website could be using, and making sure that each font displays as it should be. This was a problem when I was redesigning my own website, http://webduos.com, where you can see I used fonts not only on every page, but excessively on the homepage to create the exact feeling that I wanted without using images.

Please note that not all websites will display fonts the same way. Some browsers will display regular TTF and OTF fonts just fine, while others will give them jagged edges and make them rather unappealing. Below is an example of a website using just the TTF format of the League Gothic font viewed in Google Chrome.

Incorrect Font Face

As you can see, when you scale the font size up, you can clearly see all of the imperfections that appear as a result of just using the TTF. Below we have included the TTF, EOT, WOFF, and SVG version of the same font viewed in Google Chrome.

Correct Font Face

When comparing the two images, it’s hard to believe that we are even using the same font. The latter image is clear, perfectly displayed edges, and can be scaled to whatever size without any lost quality. Now let’s compare the two web pages code and see what we did differently.

First

<!DOCTYPE html>
<html lang="en">
<head>
<title>Incorrect use of @font-face</title>

<style>
@font-face {
font-family: LeagueGothic;
src: url('League Gothic.otf');
}

h1 {
font-family: LeagueGothic;
color: #ccc;
font-size: 5em;
}
</style>
</head>
<body>

<h1>Incorrect @font-face use</h1>

</body>
</html>
Second
<!DOCTYPE html>
<html lang="en">
<head>
<title>Correct use of @font-face</title>

<style>
@font-face {
font-family: 'LeagueGothic';
src: url('League_Gothic-webfont.eot');
src: url('League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('League_Gothic-webfont.woff') format('woff'),
url('League_Gothic-webfont.ttf') format('truetype'),
url('League_Gothic-webfont.svg#LeagueGothic') format('svg');
font-weight: normal;
font-style: normal;
}

h1 {
font-family: LeagueGothic;
color: #ccc;
font-size: 5em;
}
</style>
</head>
<body>
<h1>Correct @font-face use</h1>
</body>
</html>

The Solution

The solution to imperfect web fonts, or being stuck with TTF or OTF files is very simple. If you have read the license agreement to the font that you want to use and are sure you can use it with @font-face, then there are plenty of online resources that will take a regular font file, and give you a web font package with every format you’ll need to make sure it displays correctly across various browsers. Here are a few of my favorite tools to do this:

Font Squirrel @font-face Generator
Fontsquirrel

The Font Squirrel @font-face generator is my favorite of all the tools. It is simple to use, generates web-safe fonts to use, and even packages in the CSS file with everything that you’ll need so you don’t even have to type any code. If you know what you’re doing it has a plethora of options including the ability to remove kerning, resize the font’s x-height, custom subsetting, and much more. It does have a list of fonts that cannot be generated so don’t go trying to get your web font version of Helvetica now.

Typekit
Typekit

Perhaps the most successful tool to come out of the @font-face adoption would be Typekit. Typekit allows you to browse their gallery of fonts, and embed them in your own website. The trick to doing this is they give you a snippet of JavaScript that you put into whatever web page you want the fonts on, and then you can pick out the font that you want.

Related Posts


7 thoughts on “Generate Web-Safe Fonts When Using @font-face

  1. Senuke Affiliate

    It’s impressive that you are getting ideas from this article as well as from our discussion made at this place.

    Reply
  2. seo tools webmaster

    Excellent post. I used to be checking constantly this blog and I am inspired!
    Extremely helpful info particularly the closing section 🙂 I take
    care of such information a lot. I used to be seeking this certain info for a long time.
    Thank you and best of luck.

    Reply
  3. homepage

    Nice post. I study something more challenging on completely different blogs everyday.

    It will always be stimulating to learn content material from other writers
    and observe a little one thing from their store. I’d prefer to make use of some with the content material on
    my weblog whether or not you don’t mind. Natually I’ll give you a hyperlink on your net blog.

    Thanks for sharing.

    Reply
  4. dalle béton

    Hello There. I found your weblog the use of msn. That is a really smartly written article. I will make sure to bookmark it and come back to read more of your useful info. Thank you for the post. I’ll certainly comeback.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*