Inline Google Fonts CSS

CSS

Inlines the small font-loading CSS that the Google Fonts API serves.

Filter inline_google_font_css · Filter docs · Fetches font CSS from the Google Fonts API to demonstrate.

A mod_pagespeed 1.15 filter. ModPageSpeed 2.0 applies it as part of one always-on pipeline, not as a separate switch.

Google Analytics, AdSense and Fonts are Google products. This example shows the filter working on them; We-Amp isn't affiliated with or endorsed by Google.

Original Open in new tab

Optimized Open in new tab

Both frames render identically — that's the goal. The win is in the bytes and requests below, not the look. They're served live by mod_pagespeed 1.15 on demo-httpd-1.1.modpagespeed.com; the optimized frame applies only this filter. Right after a cache purge it may briefly match the original while the worker rewrites it — reload to see the result.

Measured impact

HTTP requests

2 1

−1

Total bytes

569 B 492 B

−14%

What changed in the source

The page's HTML, before and after this filter. Red lines are removed, green lines are added.


                
                  
                        <html>
                    

                          <head>
                    

                            <title>inline_google_font_css example</title>
                    

                      -     <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto">
                    

                      +     <style>@font-face {
                    

                      +   font-family: 'Roboto';
                    

                      +   font-style: normal;
                    

                      +   font-weight: 400;
                    

                      +   font-stretch: normal;
                    

                      +   src: url(http://fonts.gstatic.com/s/roboto/v51/KFOMCnqEu92Fr1ME7kSn66aGLdTylUAMQXC89YmC2DPNWubEbVmUiA8.ttf) format('truetype');
                    

                      + }
                    

                      + </style>
                    

                            <style>
                    

                              body {
                    

                                font-family: 'Roboto', sans-serif;

Run this on your own site

This is one of 47 filters mod_pagespeed 1.15 applies in place — self-hosted on Apache, nginx, and IIS. Install and run it: it optimizes right away and adds an X-PageSpeed-Warn: unlicensed header until you license it. Production use requires a commercial license — but the software never locks you out.

Download & run

← All optimization examples