Troubleshooting

Missing Cross-Origin Resource Sharing (CORS) Response Header

Browsers:

  • Firefox (3.5+)
  • Internet Explorer (9+)
  • Chrome (37+)

Overview

Chrome, Firefox and newer versions of Internet Explorer enforce the Cross-Origin Resource Sharing standard, and thus only render web fonts served with the appropriate “Access-Control-Allow-Origin” response header. As Google Fonts may be viewed on any domain, the fonts are served with the following response header:

Access-Control-Allow-Origin:*

Potential Cause

Some proxies may strip the header from the response, after which the browser will not render the fonts.

Diagnosing

With Chrome, check for the relevant warning message in the DevTools console.

With Firefox, one can either use the Firebug or Live HTTP Headers extensions to view the response headers to confirm the presence of the CORS response header.

Web Fonts are not showing up on Firefox when NoScript plugin is installed

Browsers: * Firefox (3.5+)

Overview

Firefox does not display web fonts when the NoScript plugin is installed.

Potential Cause

By default the NoScript plugin disables @font-face rules.

Solution

Open the NoScript Options, go to the Embeddings tab and uncheck: Forbid @font-face

Web Fonts are not showing up

Browsers: * All

Overview

The web fonts used are not showing up.

Potential Cause

There is an error in the API URL, or a style that is not supported by the font has been requested.

Solution

Make sure that the URL is properly formatted, that the case is respected in the name of the font (e.g. Droid Serif not droid serif), that the syntax for weight and styles is respected as well as the syntax to load multiple families (see the documentation: Getting Started - Syntax. When fonts are not showing up, looking at the content of the stylesheet can give more information as to what is going wrong. Copy and paste the URL in your browser and make sure that you see no error message. For example requesting a weight not supported by Droid Serif will show the following error message:

/* Droid Serif (style: normal, weight: 300) is not available */
/* However, style: normal, weight: normal is available */
/* However, style: italic, weight: normal is available */
/* However, style: normal, weight: bold is available */
/* However, style: italic, weight: bold is available */
/* Not supported. */

Web Fonts are looking thicker when used in a heading

Browsers: * All

Overview

The fonts look thicker when used in a heading (h1, h2, etc) even though the font is a normal (400) weight.

Potential Cause

The browser auto-bolded the text.

Solution

Make sure that the correct font-weight is specified in your CSS rule when applying a font to a header:

h1 {
 font-family: Lobster, cursive;
 font-weight: 400;
}