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.1 filter. ModPageSpeed 2.0 applies it as part of one always-on pipeline, not as a separate switch.
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.1 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
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">
+ <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;