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.
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('https://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('https://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.
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.