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 module filter.
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 the mod_pagespeed module 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 the mod_pagespeed module applies in place — self-hosted on Apache, nginx, and IIS. Install and run it: it optimizes right away and adds an the optimized response headers shown above. Open source under the Apache License 2.0 — free in development and in production.