Inline Google Fonts API CSS

Configuration

The 'Inline Google Fonts API CSS' filter is enabled by specifying:

Apache:
ModPagespeedEnableFilters inline_google_font_css
Nginx:
pagespeed EnableFilters inline_google_font_css;

in the configuration file. You also need to enable HTTPS Fetching if your pages load fonts over HTTPS:

Apache:
ModPagespeedFetchHttps enable
Nginx:
pagespeed FetchHttps enable;

As of 1.9.32.6, the size limit for this filter is controlled as follows:

Apache:
ModPagespeedGoogleFontCssInlineMaxBytes bytes
Nginx:
pagespeed GoogleFontCssInlineMaxBytes bytes;

In older versions, the filter used same size limits as the main CSS filter:

Apache:
ModPagespeedCssInlineMaxBytes bytes
Nginx:
pagespeed CssInlineMaxBytes bytes;

This is the maximum size in bytes of any CSS file that will be inlined.

Description

The "Inline Google Fonts API CSS" filter reduces the number of requests made by a web page that uses the Google Fonts API by inlining the small loader CSS into the webpage. Note that because the loader CSS is browser-specific, this feature is not currently compatible with downstream caching being on or ModifyCachingHeaders being off.

Operation

When the 'Inline Google Fonts API CSS' filter is enabled, the contents of the small external CSS resources produced to load the fonts are written directly into the HTML document; the browser does not need to request those CSS resources independently.

For example, if the HTML document looks like this: 

<html>
  <head>
    <title>inline_google_font_css example</title>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto">
    <style>
      body {
        font-family: 'Roboto', sans-serif;
      }
    </style>
  </head>
  <body>
  The font should be slightly more robotic.
  </body>
</html>

Then, a visitor using a browser for which woff fonts are preferred may see something like: 

<html>
  <head>
    <title>inline_google_font_css example</title>
    <style>@font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 400;
      src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v9/abcd.woff) format('woff');
    }
    </style>
    <style>
      body {
        font-family: 'Roboto', sans-serif;
      }
    </style>
  </head>
  <body>
  The font should be slightly more robotic.
  </body>
</html>

This eliminates the browser request to fonts.googleapis.com and potentially the need for the browser to perform a DNS lookup and connect to that host entirely.

Example

You can see the filter in action at www.modpagespeed.com on this example.

Risks

You must ensure that you abide by Google Fonts API Terms of Service. Note that enabling this filter will cause some requests to be sent to the API from your server (rather than just the visitor), which may be logged per the Fonts API Terms of Service.

The filter is low to moderate risk. It should be safe for most pages, but it could potentially break scripts that walk the DOM looking for and examining <link> or <style> tags.