https://github.com/rareloop/wp-font-fout

Optimise font loading, producing a FOUT instead of a FOIT
https://github.com/rareloop/wp-font-fout

Last synced: 12 months ago
JSON representation

Optimise font loading, producing a FOUT instead of a FOIT

• Host: GitHub
• URL: https://github.com/rareloop/wp-font-fout
• Owner: Rareloop
• Created: 2015-12-16T13:58:28.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2015-12-16T14:06:13.000Z (over 10 years ago)
• Last Synced: 2025-05-21T00:36:16.630Z (about 1 year ago)
• Language: PHP
• Size: 5.86 KB
• Stars: 0
• Watchers: 8
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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:

````php

`. 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:

````css

body {

    font-family: 'Georgia, serif';

}

.fonts-loaded body {

    font-family: 'PT Serif, Georgia, serif';

}

````

### 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 `_fonts_cached_in_browser` and make it last 30 days you could do the following:

````php

` element before it's sent to the browser.

To add this optimisation you can use the following shortcode in your template:

````html

    ...

    ...

````

The shortcode will only add the class when the cookie is detected. It will also prevent the inline JavaScript from being injected, reducing the payload of future page loads.

The plugin adds the following cookie: `fonts-loaded`, which you should add to your Cookie/Privacy Policy.