Optimize Google Fonts
Do you use web fonts? No? Then what are you doing here! For all of you using Google Fonts, keep reading to find out how SWIS can help you make your fonts load faster.
- First, SWIS finds all the Google Font code in your page, and combines it into one chunk of CSS.
- Then, the plugin inlines the Google Font code, which eliminates an HTTP request (more if you have several plugins/themes using Google Fonts), and also eliminates a DNS lookup.
- It applies the "font-display: swap" rule to all the fonts, so that your text can display immediately without waiting for the fonts to load.
- For bonus points, SWIS issues a "preconnect" directive, so that the browser will load the fonts as quick as possible and not get stalled out waiting for the connection to fonts.gstatic.com (Google's font server).
Great... now how do I use it?
Once you enable this option, load any page on your site (while logged in as an administrator), and SWIS will automatically scan your site for Google Fonts. Refresh the settings page, and you'll be able to see the font CSS that has been generated, as well as the CSS "handles" that will be dequeued, since they are no longer needed. You can edit any of the auto-detected CSS if you need to, or add more later. To re-run the auto-detection routine, simply clear out the Google Fonts CSS field. Visit one of your pages again, and SWIS will take it from there.