Web FontFont User Guide

A. About This User Guide

This Web FontFont User Guide contains information aimed at different groups of people: web developers, system administrators and website visitors.

Section B is for web developers. It shows how to get started using Web FontFonts for display on your website.

Section C contains information for system administrators about which configuration changes may be necessary to successfully serve webfonts from your web server.

Section D outlines some issues your website visitors may experience in connection to webfonts and may assist site owners in answering webfont-related support requests.

For more general information about Web FontFonts, e. g. language support, please refer to the OpenType User Guide.

B. Web Developers

Browser Support

Web FontFonts are delivered as .woff files, which stands for Web Open Font Format.

BrowserWOFF support from version
Internet Explorer 9
Firefox 3.6
Google Chrome 6
Safari ® 5.0.6
Mobile Safari ® iOS 5.0
Opera © 11.10
Android™ Browser 4.4

If you need to support older browsers, notably Internet Explorer 8 and older, you need fonts in EOT (Embedded OpenType) format. There is a separate section on how to support older Internet Explorer versions.

Using Webfonts with Cascading Style Sheets (CSS)

Upload the font files to your web server. Use the CSS code example below to address your webfonts. Replace the example font file URL with its appropriate path on your server.

@font-face {
  font-family: MyKievit;
  src: url("/fonts/KievitWebPro-Medium.woff") format("woff");
}

The value of the font-family property (‘MyKievit’ in this example) is only used internally in your style definitions, so you could set it to any name you like. Make sure to keep it shorter than 32 characters though, or Internet Explorer will not display your webfonts.

You can then reference your font family in CSS font stacks by the name you gave it as you would any other (system) font. For example:

body {
  font-family: MyKievit, Arial, sans-serif;
  line-height: 1.4em;
}

You should always set the line-height CSS property, otherwise the baseline positions and line spacing will differ between browsers.

Building Style-linked Groups of Fonts

Style-linked fonts are being used in all HTML elements that usually display variants of their default fonts, e. g. em (emphasis: italic by default) and strong (strong emphasis: bold by default).

Use the font-weight and font-style properties inside your @font-face rules to define groups of style-linked fonts under a common family name:

@font-face {
  font-family: Unit;
  src: url("/fonts/UnitWebPro-Regular.woff") format("woff");
}

@font-face {
  font-family: Unit;
  src: url("/fonts/UnitWebPro-Bold.woff") format("woff");
  font-weight: bold;
}

@font-face {
  font-family: Unit;
  src: url("/fonts/UnitWebPro-Italic.woff") format("woff");
  font-style:  italic;
}

@font-face {
  font-family: Unit;
  src: url("/fonts/UnitWebPro-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style:  italic;
}

p {
  font-family: Unit, Arial, sans-serif;
  line-height: 1.35em;
}

You don’t have to stick to the usual Regular–Bold–Italic–Bold Italic combination; you can build any groups you want. The example below makes a group that links the Light to the Extra Bold weight and both their italics:

@font-face {
  font-family: Unit;
  src: url("/fonts/UnitWebPro-Light.woff") format("woff");
}

@font-face {
  font-family: Unit;
  src: url("/fonts/UnitWebPro-ExtraBold.woff") format("woff");
  font-weight: bold;
}

@font-face {
  font-family: Unit;
  src: url("/fonts/UnitWebPro-LightItalic.woff") format("woff");
  font-style:  italic;
}

@font-face {
  font-family: Unit;
  src: url("/fonts/UnitWebPro-ExtraBoldItalic.woff") format("woff");
  font-weight: bold;
  font-style:  italic;
}

p {
  font-family: Unit, Arial, sans-serif;
  line-height: 1.25em;
}

You could even introduce an italic from a completely different font family into your style-linked group. In this example FF Unit Slab Italic is paired with FF Meta:

@font-face {
  font-family: MetaUnitSlab;
  src: url("/fonts/MetaWeb-Book.woff") format("woff");
  font-weight: normal;
  font-style:  normal;
}

@font-face {
  font-family: MetaUnitSlab;
  src: url("/fonts/ MetaWeb-Bold.woff") format("woff");
  font-weight: bold;
  font-style:  normal;
}

@font-face {
  font-family: MetaUnitSlab;
  src: url("/fonts/UnitSlabWeb-Italic.woff") format("woff");
  font-weight: normal;
  font-style:  italic;
}

@font-face {
  font-family: MetaUnitSlab;
  src: url("/fonts/UnitSlabWeb-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style:  italic;
}

p { font-family: MetaUnitSlab, Tahoma, sans-serif; }

Internet Explorer 9 and newer can’t style-link fonts when in Compatibility Mode. in case you notice any problems make sure you are using the browser in Standards Mode. You can tell Internet Explorer to use its latest Standards Mode by adding this meta element to the head element of your HTML page:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Advanced Typographic Features in CSS

Web FontFonts contain a rich selection of advanced typographic features, known as OpenType layout features.

Each Web FontFont comes with an interactive HTML sample page in which you can see which layout features are available in that particular font. There you will find buttons to switch features on and off, and generate customized code to copy and paste into your CSS.

Certain OpenType layout features should be active by default, such as kerning (kern), contextual alternates (calt) and standard ligatures (liga).

Here is a short example for controlling these layout features via their low-level syntax which uses a four-letter code for each feature.

body {
  /* the low-level syntax is supported by most browsers,
     at least with a nice variety of vendor prefixes */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -moz-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -ms-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -o-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;

  /* Safari needs some settings in a different syntax */
  font-kerning: normal;
}

Ligatures and contextual alternates are always active in Safari and can’t be controlled by web developers.

Customizing Web FontFonts with the FontFont Subsetter

FontFont Subsetter is a tool for optimizing and customizing Web FontFonts. The free service – found at www.subsetter.com – lets you significantly reduce file sizes of your Web FontFonts to reduce bandwidth usage and make your websites faster.

Subsetter allows you to strip out extraneous glyphs and typographic features that you may not need, like unused language characters, punctuation marks, OpenType layout features, alternate glyph sets, or kerning information. It will create a new, lighter webfont file tailored to each unique website.

You can also select to download your fonts in Web TTF and EOT formats for older browsers.

Smaller files mean faster websites and a better user experience. Dropping inessential characters from a webfont can make a big difference in the long term. Smaller files are less expensive too. As a website becomes more popular, it costs more to host and maintain. Every bit of saved bandwidth saves money.

FF Subsetter optimizes fonts in three simple steps:

  • Upload a Web FontFont.
  • Strip out glyphs and features that may not be needed for a particular site.
  • Download your optimized font file.

File sizes can be reduced up to 90% and the new fonts are instantly usable on the web, just like the originals.

You can also select to download your fonts in TTF and EOT formats for older browsers.

Please have a look at the on-site help functions on www.subsetter.com for details.

Settings for Internet Explorer 4 – 8

EOT (Embedded OpenType) format

If you need to support Internet Explorer 8 and older, you must serve fonts in EOT (Embedded OpenType) format in addition to the WOFF format.

You can convert your WOFF FontFonts to the EOT format using the FontFont Subsetter web service.

Upload your WOFF file and choose the first option, ‘Convert to EOT’. If you want to fine-tune the font further, such as removing unneeded characters to decrease the file size, please refer to the Subsetter section of this user guide.

Using both EOT and WOFF with Cascading Style Sheets (CSS)

Upload the font files to your web server. You need two files, one EOT and one WOFF for each font style you want to use in your site. Use the CSS code example below to address your webfonts. Replace the example font file URL with its appropriate path on your server.

/* first for Internet Explorer < 9 */
@font-face {
  font-family: MyKievit;
  src: url("/fonts/KievitWebPro-Medium.eot");
}

/* then for WOFF-capable browsers */
@font-face {
  font-family: MyKievit;
  src: url("/fonts/KievitWebPro-Medium.woff") format("woff");
}

The value of the font-family property (‘MyKievit’ in this example) is only used internally in your style definitions, so you could set it to any name you like. Make sure to keep it shorter than 32 characters though, or Internet Explorer will not display your webfonts.

When the @font-face rule for EOT precedes the rule for WOFF fonts, older Internet Explorer versions will use the EOT fonts whereas Internet Explorer 9 and newer will use the WOFF fonts, which is the desired behaviour.

Style-linking Workaround for EOT

Internet Explorer 4 – 8 display synthetic bold and italic styles for EOT FontFonts. To avoid this, you can change the appropriate CSS rules for the affected browser versions.

You have to redefine all font properties for elements which would otherwise use a style-linked variant. To apply this in Internet Explorer versions 4 – 8 only, you can use a conditional comment in your HTML code to link to a browser-specific CSS file in addition to your standard CSS files:

<link rel="stylesheet" href="screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="print.css" type="text/css" media="print">
<!--[if lt IE 9]>
    <link rel="stylesheet" href="ie-specific.css" type="text/css"
          media="screen">
<![endif]-->

The contents of the file ie-specific.css would look like this:

/* first redefine EOT styles as separate families */
@font-face {
  font-family: KavaWebPro-Italic; /* was ‘KavaWebPro’ */
  src: url("/fonts/KavaWebPro-Italic.eot");
}

@font-face {
  font-family: KavaWebPro-Bold; /* was ‘KavaWebPro’ */
  src: url("/fonts/KavaWebPro-Bold.eot");
}

@font-face {
  font-family: KavaWebPro-BoldItalic; /* was ‘KavaWebPro’ */
  src: url("/fonts/KavaWebPro-BoldItalic.eot");
}

/* ‘em’ is usually displayed using the italic variant.
   Redefine ‘font-family’ using the new separate font entry from above
   and reset the ‘font-variant’ property from ‘italic’ to ‘normal’
   to avoid slanting the italic again: */
em {
  font-family: KavaWebPro-Italic;
  font-variant: normal;
}

/* ‘strong’ is usually displayed using the bold weight.
   Redefine ‘font-family’ using the new separate font entry from above
   and reset the ‘font-weight’ property from ‘bold’ to ‘normal’
   to avoid emboldening the bold again: */
strong {
  font-family: KavaWebPro-Bold;
  font-weight: normal;
}

/* Combinations of ‘strong’ and ‘em’ are usually displayed using the
   bold italic font.
   Redefine ‘font-family’ using the new separate font entry from above
   and reset the ‘font-weight’ property from ‘bold’ to ‘normal’ as well
   as ‘italic‘ to normal to avoid emboldening and slanting the
   bold italic again: */
strong em, em strong {
  font-family: KavaWebPro-BoldItalic;
  font-weight: normal;
  font-style:  normal;
}

The only drawback of this solution is that if the webfont display should fail for some reason so that fallback fonts are used, the em and strong elements will be rendered identical to regular text in Internet Explorer because the font-variant and font-weight properties have been reset to normal.

Internet Explorer 9 exhibits the same behaviour when in Compatibility Mode. Make sure you are using the browser in Standards Mode in case you notice any problems. You can tell Internet Explorer to use its latest Standards Mode by adding this meta element to the head element of your HTML page:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

C. System Administrators

The configuration snippets given in this section are short examples and may not contain everything that is required to make a certain feature work in your specific server setup. Please always double-check the configurations against your web server’s manual if you are in doubt about what they do exactly.

MIME Types for Webfonts

To ensure proper handling of webfont files by your web server, you should add their corresponding MIME types to your MIME configuration.

File suffixMIME type
eot application/vnd.ms-fontobject
woff application/font-woff

Microsoft ® Internet Information Server (IIS) already has a MIME type entry for EOT, but not for WOFF. IIS will not send WOFF files to a client at all, unless you add the MIME type for WOFF fonts as shown below.

Strange Log File Entries Caused by Internet Explorer

You may notice entries like the ones below in your web server log files:

GET /fonts/DaxCompactWeb-Black.eot HTTP/1.1 200 104992
GET /fonts/DaxCompactWeb-Black.woff)%20format(%22woff%22) HTTP/1.1 404 290

The first request is a correct one. The second request occurs due to a bug in Internet Explorer. Internet Explorer does not understand the @font-face rule for WOFF fonts and misinterprets it, resulting in an erroneous request for a non-existing file. This second log entry may safely be ignored.

Using Content Compression for Webfont Files

Activating content compression in your web server can reduce traffic volume and loading times. Files are compressed on the fly before sending them to the client, thus reducing the amount of data to be transmitted.

For example, the Apache HTTP Server (versions 2+) provides compression by the module mod_deflate. Below is the module’s default configuration, in which only text files are compressed:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml
</IfModule>

Modify your configuration as shown below to have your Apache HTTP Server compress EOT fonts as well before transmitting them. This only works as intended if you have defined a separate MIME type for EOT fonts (see above).

Add the MIME type for EOT fonts to the list of types to be compressed in your mod_deflate configuration:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml \
    application/vnd.ms-fontobject
</IfModule>

This measure will reduce the traffic volume generated by EOT FontFonts by about 50 to 60%. WOFF font files are already pre-compressed, so further compression is not necessary.

Blocking Hotlinking of Webfont Files

When other websites directly link to your hosted webfont files (also called hotlinking), they are using your fonts, which they haven’t licensed, and they are using your bandwidth, adding to your site’s traffic costs.

To prevent hotlinking of font files, you can utilize origin and referrer checking in your web server. Each request for a font file which doesn’t come from a page of your own site will be blocked after you add the rules below to your server configuration (the example is for Apache HTTP Server).

Let’s say you have uploaded the webfont files onto to your site www.example.com into a subdirectory called /fonts/. Make a new file named .htaccess inside this directory and paste these lines into it:

RewriteEngine On
RewriteCond %{HTTP:Origin}  !^$|http(s)?://(www\.)?example\.com$ [NC]
RewriteRule \.(woff|eot)$ - [NC,L]
RewriteCond %{HTTP_REFERER} !.
RewriteRule \.(woff|eot)$ - [F,NC,L]
Options -Indexes

Replace example.com by your own host name. The dot must be preceded by a backslash. The regular expression (www\.)? means that both URLs with and without the ‘www’ prefix are valid for your site, and (s)? means that your site may be accessed via HTTPS or plain HTTP.

Requests for all files ending in .woff or .eot with an origin HTTP header (i. e. request coming from a site other than your own) or an empty referrer will now receive an HTTP error 403 (‘forbidden’). The line Options -Indexes disables the file listing for the fonts directory.

If you get an HTTP error 500 (‘internal server error’) after editing the .htaccess file or if the file has no effect, your server probably does not allow changing configuration settings this way. In case you can’t or don’t want to use an .htaccess file, you can put these lines directly into your Apache configuration. Please refer to the server documentation if you’re not sure where to put them exactly.

If you are using Internet Information Server, you can convert the above configuration from Apache-style to IIS rewrite rules. See Importing Apache mod_rewrite Rules for details.

There are circumstances in which referrer information is not sent when it should be, e. g. if a website visitor uses certain ad-blocking plug-ins. In this rare case the above configuration will cause fallback fonts to be displayed instead of your specified webfonts.

D. User Settings

Rendering Issues on Windows ®

Web FontFonts are optimized for screen display with ClearType ® font smoothing turned on. ClearType is enabled by default in Windows Vista ®, Internet Explorer 7, Firefox 4 and newer versions.

To enable ClearType:

Click Start, then open the Control Panel, click Appearance and Themes, then click Display. In the Appearance tab, click Effects. Click to select the Use the following method to smooth edges of screen fonts check box, then select ClearType in the list box. Click OK in the two open dialog windows to apply the changes.

Please see HOW TO: Use ClearType to Enhance Screen Fonts in Windows XP for further information on ClearType.

If users can not or do not want to use ClearType or similar font smoothing methods for some reason, they may prefer to disable webfonts in their browser. Please refer to the next two sections for how to do this in Firefox and Internet Explorer.

Disabling Webfonts in Firefox

Type ‘about:config’ into the address field and hit enter. Confirm the warning dialogues that appear, then use the Filter field to search for ‘gfx.downloadable_fonts.enabled’. Double-click to change the setting to false as shown below. Restart Firefox.

Disabling Webfonts in Internet Explorer

Menu Extras – Internet Options – General – Accessibility – check Ignore font styles specified on Web pages as shown below. This setting will always use the fonts you specified in your Internet Explorer display settings.