| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| --> |
| |
| <html> |
| <head> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Inline Google Fonts API CSS</title> |
| <link rel="stylesheet" href="doc.css"> |
| </head> |
| <body> |
| <!--#include virtual="_header.html" --> |
| |
| |
| <div id=content> |
| <h1>Inline Google Fonts API CSS</h1> |
| |
| <h2>Configuration</h2> |
| <p> |
| The 'Inline Google Fonts API CSS' filter is enabled by specifying: |
| <dl> |
| <dt>Apache:<dd><pre class="prettyprint" |
| >ModPagespeedEnableFilters inline_google_font_css</pre> |
| <dt>Nginx:<dd><pre class="prettyprint" |
| >pagespeed EnableFilters inline_google_font_css;</pre> |
| </dl> |
| <p> |
| in the configuration file. You also need to |
| enable <a href="https_support#https_fetch">HTTPS Fetching</a> if your pages load |
| fonts over HTTPS: |
| |
| <dl> |
| <dt>Apache:<dd><pre class="prettyprint" |
| >ModPagespeedFetchHttps enable</pre> |
| <dt>Nginx:<dd><pre class="prettyprint" |
| >pagespeed FetchHttps enable;</pre> |
| </dl> |
| |
| </p> |
| |
| <p>As of 1.9.32.6, the size limit for this filter is controlled as follows: |
| <dl> |
| <dt>Apache:<dd><pre class="prettyprint" |
| >ModPagespeedGoogleFontCssInlineMaxBytes bytes</pre> |
| <dt>Nginx:<dd><pre class="prettyprint" |
| >pagespeed GoogleFontCssInlineMaxBytes bytes;</pre> |
| </dl> |
| |
| <p>In older versions, the filter used same size limits as the main CSS filter: |
| <dl> |
| <dt>Apache:<dd><pre class="prettyprint" |
| >ModPagespeedCssInlineMaxBytes bytes</pre> |
| <dt>Nginx:<dd><pre class="prettyprint" |
| >pagespeed CssInlineMaxBytes bytes;</pre> |
| </dl> |
| <p> |
| This is the maximum size in bytes of any CSS file that will be inlined. |
| </p> |
| <h2>Description</h2> |
| <p> |
| 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 |
| <code>ModifyCachingHeaders</code> being off. |
| </p> |
| <h2>Operation</h2> |
| <p> |
| 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. |
| </p> |
| <p> |
| For example, if the HTML document looks like this: |
| </p> |
| <pre class="prettyprint"> |
| <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> |
| </pre> |
| <p> |
| Then, a visitor using a browser for which woff fonts are preferred may see |
| something like: |
| </p> |
| <pre class="prettyprint"> |
| <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> |
| </pre> |
| <p> |
| This eliminates the browser request to <code>fonts.googleapis.com</code> and |
| potentially the need for the browser to perform a DNS lookup and connect to |
| that host entirely. |
| |
| <h3>Example</h3> |
| <p> |
| You can see the filter in action at <code>www.modpagespeed.com</code> on this |
| <a href="https://www.modpagespeed.com/examples/inline_google_font_css.html?PageSpeed=on&PageSpeedFilters=inline_google_font_css">example</a>. |
| </p> |
| |
| <h2>Risks</h2> |
| <p> |
| You must ensure that you abide by |
| <a href="https://developers.google.com/fonts/terms">Google Fonts API Terms of Service</a>. |
| 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. |
| </p> |
| |
| <p> |
| 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 <code><link></code> or <code><style></code> tags. |
| </p> |
| </div> |
| <!--#include virtual="_footer.html" --> |
| </body> |
| </html> |
