Google Fonts

Technical Considerations

This document provides some technical information about what's going on behind the scenes when you request a web font with the Google Fonts API.

This document also gives information about browser-specific behavior.

If you just want to use the Fonts API, you don't need to read this page. However, reading this page may help you improve page load performance.

Contents

What is the Google Fonts API serving?

When a browser sends a request for a Fonts API stylesheet (as specified in a <link> tag in your web page), the Fonts API serves a stylesheet generated for the specific user agent making the request.

A request for Inconsolata from Firefox, for example, returns the following CSS:

@font-face {
  font-family: 'Inconsolata';
  src: local('Inconsolata'), url('http://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');
}

A request from Internet Explorer, on the other hand, returns:

@font-face {
  font-family: 'Inconsolata';
  src: url('http://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
}

After downloading the CSS, the browser downloads the font in the appropriate format for the browser.

Browser-specific behavior

This section describes each brower's default behavior with web fonts. Note that you can control these behaviors using the Web Font Loader.

For a list of supported browsers, see the FAQ.

Google Chrome

Chrome renders the rest of the page, but until the font has loaded, it displays a blank space in place of the text that uses the font.

Mozilla Firefox

Firefox first displays the text in the default font, and then re-renders text in the font once it has loaded. (This behavior is known as a “flash of unstyled text.”)

Apple Safari

Safari renders the rest of the page, but until the font has loaded, it displays a blank space in place of the text that uses the font.

Microsoft Internet Explorer

Internet Explorer renders the rest of the page, but until the font has loaded, it displays a blank space in place of the text that uses the font.

Note: For best display in IE, make the stylesheet <link> tag the first element in the HTML <head> section. In IE, if the link is placed after <script> tags, the entire page will block and not display anything until the font is loaded.

More generally, Internet Explorer's behavior may vary depending on the placement and existence of various elements. If you want to provide consistent behavior across all browsers, use the Web Font Loader. For example, you can choose to make all browsers behave like Firefox.

Authentification requise

Vous devez être connecté à Google+ pour effectuer cette opération.

Connexion en cours…

Le site Google pour les développeurs a besoin de votre autorisation pour effectuer cette opération.