Why does the font I have look different?

The most likely explanation is that you have the OpenType features activated. Here’s a tutorial to show you what this means and how to fix it.

Why and how to use OpenType ›

Webfonts won't load in all browsers?

Either you didn't upload the fonts to the correct directory, or you've likely not linked the fonts properly in the CSS. If you find you've done both and still have an issue, then make sure you take a look at your .htaccess file to see if any requests are getting intercepted.

Webfonts won't load in Safari?

If Safari isn't loading up your fonts, make sure you double check that the TTF file is linked correctly. Safari is fairly reliable, so not much causes it to fail. The only issues we have found is that if your stylesheet has a double declaration of @charset “UTF-8”; then the @font-face declarations fail to load the fonts.

Webfonts won't load in Firefox?

Version 3.5 of Firefox was the first version that supported @font-face, so make sure you are not using an outdated version. You'll also find Firefox has strict requirements for where the font sits in relation to your website. It requires all of the font assets to be hosted from the exact same domain as the calling website, so in a nutshell you can't host them externally. If you are using Apache, you can add the following code to your .htaccess file so your site can access the fonts:

FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Or even better, since the above code will allow anyone to leach:
<FilesMatch "\.(eot|otf|woff|ttf)$">
SetEnvIf Origin »
"^http(s)?://(.+\.)?(domain1\.org|website\.com)$" origin_is=$0
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

Just remember to swap out your domains for the placeholders above. Lastly, if you are serving fonts from Microsoft IIS, you will need to add WOFF to the list of MIME types. Please be aware that there is no defined MIME type yet for WOFF, but "font/x-woff" is confirmed to work.

Webfonts won't load in Internet Explorer 9?

Internet Explorer 9 has strict requirements for where the font sits in relation to your website. It requires all of the font assets to be hosted from the exact same domain as the calling website, so in a nutshell you can't host them externally. If you are using Apache, you can add the following code to your .htaccess file so your site can access the fonts:

<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Or even better, since the above code will allow anyone to leach:
<FilesMatch "\.(eot|otf|woff|ttf)$">
SetEnvIf Origin »
"^http(s)?://(.+\.)?(domain1\.org|website\.com)$" origin_is=$0
Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

Just remember to swap out your domains for the placeholders above. Lastly, if you are serving fonts from Microsoft IIS, you will need to add WOFF to the list of MIME types. Please be aware that there is no defined MIME type yet for WOFF, but "font/x-woff" is confirmed to work.

Webfont bugs

Here's a list of bugs that have been uncovered with CSS and @font-face:

• iOS devices will often show a shadow, or double printed version of the webfont when bold is applied by the browser.

• If your fonts will not display in firefox, and you've checked everything then we have one more option for you to try. Firefox has the ability to turn off webfonts, which can be done by going to: Preferences > Content > Advanced — in here is a check box that says “Allow pages to choose their own fonts, instead of my selections above.“

• Poor rendering in Safari and Chrome. Any text with @font-face applied will render without anti-aliasing. Usually you will find those fonts are 6px or monospaced fonts at small sizes, which are rendered without anti-aliasing. You can find out more here from the link below;

Anti-aliasing for @font-face fonts ›

• Internet Explorer 7 having a space between the line height and font size within your CSS file may cause the font not to render. For example: font: 16px / 1.2em ‘web_font’, Verdana, sans-serif;

I'm having problems with style linking?

Style linking is quite a confusing feature when it comes to @font-face. However, it can be extremely beneficial when you are working with a type family that contains a variety of weights. When the family itself is linked, you can refer to it just as the one name, 'Arial', instead of having to refer to it as each individual weight, for example 'ArialRegularItalic'.

Another great aspect of style linking is down to the fact that it doesn't use fake variations of bold or italic that a browser does, so in essence if a regulat weight has the <strong> tag applied to it, the browser will make the font bold using an algorithm. Instead, the correct way to do this is to tell the browser which font we would like to use when the regular weight is made bold.

Here is an example of the CSS for a style linked font:

/* #1 Regular Weight */
@font-face {
font-family: "FamilyName";
font-style: normal;
font-weight: normal;
src: url("[url to the regular version]");
}

/* #2 Italic Style */
@font-face {
font-family: "FamilyName";
font-style: italic;
font-weight: normal;
src: url("[url to the italic version]");
}

/* #3 Bold Weight */
@font-face {
font-family: "FamilyName";
font-style: normal;
font-weight: bold;
src: url("[url to the bold version]");
}

/* #4 Bold Italic Style */
@font-face {
font-family: "FamilyName";
font-style: italic;
font-weight: bold;
src: url("[url to the bold italic version]");
}

If you look closely, you'll notice that the font-family text uses the same name for all four fonts. Also, the weight and style match what the actual font is. Please just make sure that the normal/regular weight of the font is at the top of your list. Order following on from this can be completely random.

Using the fonts:

/* This will use the Regular version #1 */
h1 {
font-family: 'FamilyName', default1, default2, default3;
font-weight: normal;
font-style: normal;
}

/* This will use the Italic version #2 */
h1 {
font-family: 'FamilyName', default1, default2, default3;
font-weight: normal;
font-style: italic;
}

/* This will use the Bold version #3 */
h1 {
font-family: 'FamilyName', default1, default2, default3;
font-weight: bold;
font-style: normal;
}

/* This will use the Bold Italic version #4 */
h1 {
font-family: 'FamilyName', default1, default2, default3;
font-weight: bold;
font-style: italic;
}