Google Fonts

General FAQ

  1. Can I download the fonts on Google Fonts to my own computer?
  2. Do I need to download the font in order to use the font on my website or blog?
  3. What browsers are supported?
  4. Does the Google Fonts API work on mobile devices?
  5. What do unsupported browsers see?
  6. How is text displayed while the browser is still loading the font file?
  7. Can I use CSS3 features like text shadows in combination with web fonts?
  8. What about performance? Will web fonts slow down my page?
  9. Which fonts can I use with the Fonts API?
  10. Can I use the Fonts API on any page?
  11. Should I request all of the fonts on Google Fonts on each of my pages, just in case?
  12. What generic fallback fonts are available?
  13. How can I ensure that behavior is consistent across browsers?
  14. I have made an original typeface and would like to add it to Google Fonts. How can this be done?


Can I download the fonts on Google Fonts to my own computer?

Yes. To download the fonts, simply add fonts to your collection and click the "Download your Collection" link. You can download the fonts to use them for your mockups, in your documents or to host them on your own server.

Do I need to download the font in order to use the font on my website or blog?

No. The font is available for download in case you need the font in a local program like Adobe Photoshop. To use the font on your website or blog, you can simply copy the HTML snippet available from the "Use" tab for your collection.

What browsers are supported?

The Google Fonts API is compatible with the following browsers:

  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Opera: version 10.5+
  • Microsoft Internet Explorer: version 6+
Does the Google Fonts API work on mobile devices?

The Google Fonts API works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Support for earlier iOS versions is limited.

What do unsupported browsers see?

If someone using an unsupported browser visits a page that uses the Fonts API, then the text is displayed using the next available font in your CSS font stack.

In the following example, the text would be displayed in the unsupported browser's default cursive font:

p { font-family: 'Tangerine', cursive; }
How is text displayed while the browser is still loading the font file?

Browser behavior varies depending on the type of browser. Some will only display the text after the font file is loaded, others will use the fallback font from the font stack and then refresh the page when the font is available. The latter behavior is generally referred to as the "flash of unstyled text." For browser details, see the Technical Considerations page.

For greater control over how browsers behave while the font is still loading, use the Web Font Loader.

Can I use CSS3 features like text shadows in combination with web fonts?

Absolutely. CSS3 offers a range of features that can be applied to text on the web. Because text displayed using web fonts is still just text, it works well with CSS features like text-shadow and rotation.

(But use good design judgment; be wary of applying too many fancy special effects to a given piece of text.)

What about performance? Will web fonts slow down my page?

If a page uses web fonts, then the font files have to be downloaded to the site visitor's computer before they can be displayed initially. The font files are served compressed for a faster download. After that initial download, they will be cached in the browser. As the Google Fonts API becomes widely used, your visitors will be likely to already have the font you're using in their browser cache when they visit your page.

In general, however, you should keep an eye on the size of the font files you are serving. Also be aware that using web fonts may result in the browser making more HTTP requests than would otherwise be necessary.

Compared to using images to display a lot of text on a page, web fonts are likely to enhance the performance (and maintainability, and accessibility) of your page. In other situations, however, they might add to the overall weight of your page.

Which fonts can I use with the Fonts API?

To browse the fonts available through the Fonts API, visit Google Fonts. Google Fonts provides a preview of each font and more information about the designer who created it.

You can also load other web fonts using the Web Font Loader.

Can I use the Fonts API on any page?

Yes. All the fonts on Google Fonts are licensed under open source licenses that let you use them on any website, from a private blog to a big commercial site.

Should I request all of the fonts on Google Fonts on each of my pages, just in case?

No. Each font takes some time to download (if it's not already in the visitor's cache); only request the fonts that you're using on a given page.

Also keep good design principles in mind; most pages don't need very many fonts.

What generic fallback fonts are available?

CSS defines a set of generic font families; you can list a generic family at the end of a font stack, for browsers to fall back to. Each browser has a default font that it uses for each of these generic fonts.

serif
A font with serifs.
sans-serif
A font without serifs.
cursive
A font that has joined strokes that make it look at least somewhat like handwriting.
fantasy
A decorative font (but focused on characters rather than on icons or pictures).
monospace
A font in which every character is the same width.
How can I ensure that behavior is consistent across browsers?

As described on the Technical Considerations page, browsers may vary in their behavior while web fonts are downloading.

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.

I have made an original typeface and would like to add it to Google Fonts. How can this be done?

Please fill in the Google Fonts Proposal Form. If we think your font would be a good fit we'll be in touch with more details.

Authentifizierung erforderlich

Dazu müssen Sie in Google+ angemeldet sein.

Anmeldung...

Google Developers braucht hierfür Ihre Erlaubnis.