CAOS for Webfonts (also known as ‘Host Google Fonts Locally’) is a cool plugin for WordPress. It enables you to fine-tune your websites’ performance by allowing you to self-host your WordPress theme’s Google Fonts (and others). Minimize external requests and leverage browser cache by uploading your webfonts and let CAOS for Webfonts do the rest!

It’s completely integrated with WordPress to guarantee complete compatibility. Simply upload your webfonts using WordPress’ familiar media-upload interface, add them to the queue and automagically generate a stylesheet. The necessary CSS for your webfonts is immediately registered and enqueued in your theme’s header so it’s ready for use.

How to Optimize Google Webfonts for WordPress

Find your theme’s stylesheet and find out the name of your fonts (the ‘font-family’). In this example, the name of the font we want is ‘Open Sans’:

body {
font-family: 'Open Sans',Helvetica,Arial,sans-serif;
font-size: 16px;
font-size: 1rem;
font-weight: 300;
line-height: 1.6;
color: #555;
}

In this example, the font-weight is 300, which means it’s the light variant of the used font. Further down your theme’s stylesheet you might find different variants, such as bold, regular or semibold. Take note of all used variants and if you haven’t already, download them from Google Fonts or another webfont repository.

The .zip-package downloaded from Google contains TrueType-fonts. Which is only supported by mobile (Android/iOS) browsers, but we need our fonts to be supported by desktop as well. This is why I suggest you use Font Squirrel’s Webfont Generator to convert the TrueType-fonts to all other necessary formats. Upload your font, choose ‘Optimal’ and agree to Font Squirrel’s terms to start converting them.

Now you’ve optimized your fonts for cross-browser and -platform usage, they can be hosted locally using CAOS for Webfonts. It will save your fonts on your server and generate a stylesheet which will immediately be used by your theme.

From the CAOS for Webfonts admin-screen (Settings > Optimize Webfonts) click ‘Select Fonts‘ to upload your fonts using the WordPress Media-upload interface. Afterwards select your uploaded fonts and click ‘Insert into post‘ to add them to CAOS’ queue. You’ll see your fonts listed in the next screen. For each font, enter the font style and weight manually. Click ‘Generate Stylesheet‘. This is where the magic happens…

After this you can remove any mentions of externally loaded fonts from your theme and other plugins using Google Webfonts. From now on, CAOS for Webfonts’ stylesheet will make sure they’re loaded from your server instead of externally.

Why should I host Google Webfonts locally?

CAOS for Webfonts gives you the best of both worlds. The luxury to use any webfont you like and the ability to minimize DNS requests and leverage browser cache. Hosting Google Webfonts locally will lower your site’s loading time, because your visitor’s browser doesn’t have to make a round-trip to Google’s servers to download the fonts. Instead it loads it immediately from your server, along with everything else!

Click the image below to go to the WordPress Repository and download CAOS for Webfonts or buy me a beer!

CAOS for Webfonts
CAOS for Webfonts — Host Google Fonts Locally.