manifest / performance / wp-font-fout
Font FOUT
Optimise font loading, producing a FOUT instead of a FOIT
★ 0stars
9composer installs
0forks
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/rareloop/wp-font-fout/archive/refs/heads/master.zipAlso on Packagist as rareloop/wp-font-fout:
composer require rareloop/wp-font-foutFrom the readme
Font FOUT
WordPress plugin that allows browsers to show a Flash Of Unstyled Text (FOUT) when using web fonts.
Setup
Install & activate the plugin, then tell the plugin what font families to listen for:
This will add the required JavaScript inline to the bottom of your . When all the fonts have loaded the fonts-loaded class will be added to your element. You can use this in your CSS to control when your web font is used:
More Configuration
The init function also take additional arguments that lets you control the cookie that is created to know when fonts are loaded. If you wanted to change the cookie name to fontscachedinbrowser and make it last 30 days you could do the following:
Optimising for future page views
The JavaScript injected into your page will set a cookie once all fonts are loaded. Once loaded you can assume that your users browser will have cached the font so shouldn't need to download again. In this instance you can have the fonts-loaded class added to your element before it's sent to the browser.
To add this optimisation you can use the following shortcode in your template:
The shortcode will only add the class when the cookie is detected. It will also pre
Read the full README on GitHub →
Releases
| Tag | Published |
|---|---|
| v1.0.0 | Dec 16, 2015 |
These releases are tags only. The author does not attach a packaged zip, so there are no download counts to report.