Inline Google Fonts CSS
CSSInlines 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.
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
Total bytes
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">
+ <link rel="preconnect" href="http://fonts.gstatic.com" crossorigin><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 49 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.