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.
Self-Hosting Fonts
SWIS can also self-host your Google Fonts as of version 2.2. Simply enable the self-hosting option, and SWIS takes care of the rest. This is particularly helpful if you're concerned about the privacy implications, but also eliminates another HTTP connection and DNS lookup for improved performance.
Limitations
SWIS can only detect fonts in CSS files if they are enqueued using the normal WP method. That is, those that are added to the page via wp_enqueue_style(). If Google Fonts are added via hard-coded styles, you can still manually configure the settings, but none of the auto-magic logic will work.