WP FOFT Loader – WordPress plugin Free download

WP FOFT Loader

Description

This plugin implements and automates Zach Leatherman’s Critical FOFT with Data URI.

Acknowledgement

This plugin is based on Hugh Lashbrooke’s Starter Plugin, a robust and GPL-licensed code template for creating a standards-compliant WordPress plugin.

Generating and Uploading the Font Files

Upload two files for each web font: a WOFF file and a WOFF2 file. We recommend you use Font Squirrel’s Webfont Generator to generate the files. Mandatory Font Squirrel settings are:

Select “Expert”
Font Formats:       “WOFF”
                    “WOFF2”
Advanced Options:   “Font Name Suffix” = -webfont

For detailed recommended settings, see the plugin Upload options screen.

Filenames must follow the proper naming convention: $familySC-$variant-webfont-$filetype.

$family
The font family base name without style. Case-insensitive. May contain letters, numerals, and underscores but no hyphens or spaces.
SC
Small caps identifier. Optional. Append to $family only if it is a small caps variant. Case-sensitive.
$variant
The font style. Can be weight, style, or a combination of both. Case-sensitive.
-webfont-
Mandatory suffix. Append to $variant.
$filetype
The file type, i.e., “woff” or “woff2”.

Example: for the bold weight italic style of Times New Roman, rename the files to timenewroman-boldItalic-webfont.woff and timesnewroman-boldItalic-webfont.woff2. For small caps style families, append SC (case-sensitive) to the family name, e.g., playfairdisplaySC-bold-webfont.woff.

Allowed weights and styles and their CSS mappings are:

thin | hairline (maps to 100)
extraLight | ultraLight (maps to 200)
light (maps to 300)
regular | normal (maps to 400)
medium (maps to 500)
demiBold | semiBold (maps to 600)
bold (maps to 700)
extraBold | ultraBold (maps to 800)
black | heavy (maps to 900)
thinItalic | hairlineItalic(maps to 100)
extraLightItalic | ultraLightItalic (maps to 200)
lightItalic (maps to 300)
italic (maps to 400)
mediumItalic (maps to 500)
demiBoldItalic | semiBoldItalic (maps to 600)
boldItalic (maps to 700)
extraBoldItalic | ultraBoldItalic (maps to 800)
blackItalic | heavyItalic (maps to 900)

Configuration

Optimize

Load small subsetted font files before the page fully loads to improve performance. This setting works with the Base64 settings in the next tab. All of the fields are optional, but if you fill out any of them you should also fill out the corresponding Base64 settings field.

Enter the names of your Base64 subsetted fonts below. Only the family name is needed, not the style. Names are case-insensitive. Hyphens and underscores are allowed, but spaces are not.

Correct:

playfairdisplay (all lowercase)  
playfair-display (hyphens and underscores allowed)  
PlayfairDisplay (mixed case allowed)  

Incorrect:

playfairdisplay-bold (use the family name only; omit the style, i.e., “bold”)  
playfair display (spaces prohibited)  
Playfair Display (spaces prohibited)  

Base64

This setting inlines Base64 encoded font in the document head to improve font loading speeds. This setting works with the Optimize settings in the previous tab. All of the fields are optional, but if you fill out any of them you should also fill out the corresponding Optimize settings field.

Fonts must be subsetted and encoded to Base64. To subset and encode your fonts, we recommend you use Font Squirrel’s Webfont Generator. Mandatory Font Squirrel settings are:

Select “Expert”
Font Formats:           None
Fix Missing Glyphs:     None
Subsetting:             “Custom Subsetting” with the Unicode Ranges 0030-0039,0041-005A,0061-007A
                        Leave everything else unchecked  
OpenType Features:      None
OpenType Flattening:    None
CSS:                    “Base64 Encode”

For detailed recommended settings, see the plugin Base64 options screen. The generator will produce a file that looks something like this:

@font-face{  
  font-family: Merriweather;  
  src: url(data:application/font-woff; charset=utf-8; base64,   d09GRgABAAAAAB4UABAAAAAAMpAAA…) format(“woff”);
 }

Copy and paste the part the part between ‘src:url (data:application/font-woff; charset=utf-8; base64,’ and ‘) format(“woff”);’ into the appropriate field below. In this example that would be ‘d09GRgABAAAAAB4UABAAAAAAMpAAA…’.

CSS

@import rules are automatically handled by this plugin. You may manually inline your font-related CSS in the document <head> here. Place rules pertaining only to the font-family, font-weight, font-style, and font-variation properties here.

Plugin CSS

The plugin loads some CSS by default. You may disable it from this screen.

Font Display

The plugin uses font-display: swap by default. You can override the font-display property here.

CSS Stage 1

Declarations placed in this field will load the Base64 subset as a placeholder while the external fonts load.

Use only the family name followed by Subset (case-insensitive)
Family names must match the names you input on the “Optimize” screen.
Omit weights and styles from the font name
All declarations must start with the fonts-stage-1 class
See the Documentation screen to view the Stage 1 CSS that this plugin loads by default.

Incorrect:

.nav-primary { // Missing prefix: .fonts-stage-1
  font-family: latoSubset, sans-serif;
}

.fonts-stage-1 #footer-primary {
  font-family: lato-boldSubset, san-serif; // Don’t include the weight or style
}

.fonts-stage-1 #footer-secondary {
  font-family: lato, san-serif; // Missing “Subset” suffix
}

.fonts-stage-1 div.callout {
  font-family: lato-Subset, san-serif;
  font-size: 1rem; // “font-family,” “font-weight,” “font-style,”
                   // and “font-variant” rules only
}

Correct:

.fonts-stage-1 .nav-primary {
  font-family: latoSubset, sans-serif;
}

.fonts-stage-1 dl.glossary {
  font-family: latosubset, san-serif; // Suffix is case-insensitive
}

CSS Stage 2

Use only the family name
Family names must match the file names for the fonts you uploaded on the “Upload” screen.
Omit weights and styles from the font name
All declarations must start with the fonts-stage-2 class
For best performance, please minify your CSS before pasting it into the form.
See the Documentation screen to view the Stage 2 CSS that this plugin loads by default.

Incorrect:

tbody { // Missing class: .fonts-stage-2
  font-family: lato, Corbel, "Lucida Grande", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.fonts-stage-2 span.bolder {
  font-family: lato-bold, Corbel, "Lucida Grande", sans-serif; // Don’t include style in font name.
  // Better yet, omit declaration altogether.
  font-weight: 700;
}

.fonts-stage-2 div.callout {
  font-family: lato-regular, Corbel, "Lucida Grande", san-serif;
  font-size: 1rem; // “font-family,” “font-weight,” “font-style,”
                   // and “font-variant” rules only
}

Correct:

.fonts-stage-2 div.callout {
  font-family: lato, Corbel, "Lucida Grande", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.fonts-stage-2 div.callout {
  // No need to redeclare the font-family — all weights map to a single family name
  font-weight: 700; // This will use the lato-bold font
}

For best performance, please minify your CSS before pasting it into the form.

Font Stacks

Change the default font fallbacks in case your custom fonts don’t load. Don’t include the names of your default custom fonts here.

Further Documentation

See the Documentation screen to view the CSS this plugin loads by default and to view video tutorials.

Translations

English: Default language, always included
Dutch, Netherlands (nl_NL) by Augus van Gils @augusgils

Forthcoming translations:

Spanish (es) by Daniel de Lira
Spanish (es_MX) by Nilo Vélez @nilovelez

Screenshots

Uploads screen: upload your custom web fonts here
Optimize screen: tells fontobserver.js which fonts to load for stage 1
Base64 screen: inlines Base64 data URI for subsetted stage 1 fonts
CSS screen: all font-related CSS goes here so it can be inlined.
Font Stacks screen: sets the default font stacks
Documentation (1): Information about the CSS that the plugin loads by default
Documentation (2): Video tutorials

Installation

USING THE WORDPRESS DASHBOARD

Navigate to “Add New” in the plugins dashboard
Search for “WP FOFT Loader”
Click “Install Now”
Activate the plugin on the Plugin dashboard
Go Settings -> WP FOFT Loader, upload your fonts, and configure the settings.

UPLOADING IN WORDPRESS DASHBOARD

Navigate to“Add New” in the plugins dashboard
Navigate to the “Upload” area
Select wp-foft-loader.zip from your computer
Click “Install Now”
Activate the plugin in the Plugin dashboard
Go Settings -> WP FOFT Loader, upload your fonts, and configure the settings.

USING FTP

the WP FOFT Loader ZIP file
Extract the WP FOFT Loader ZIP file to your computer
Upload the “wp-foft-loader” directory to the /wp-content/plugins/ directory
Activate the plugin in the Plugin’s dashboard
Go Settings -> WP FOFT Loader, upload your fonts, and configure the settings.

DOWNLOAD FROM GITHUB

the plugin via https://github.com/seezee/WP-FOFT-Loader
Follow the directions for using FTP

FAQ

What is the plugin for?

This plugin implements and automates Zach Leatherman’s Critical Flash of Faux Text (FOFT) with Data URI. This technique is the best compromise between font speed loading and a positive user experience.

PROS

All the existing Pros of the Critical FOFT approach.
Eliminates Flash of Invisible Text (FOIT) and greatly reduces Flash of Unstyled Text (FOUT) for the roman font. A small reflow will occur for additional characters loaded in the second stage and when the other weights and styles are loaded, but it will have a much smaller impact.

CONS

All the existing Cons of the Critical FOFT approach.
The small inlined Data URI will marginally block initial render. We’re trading this for highly reduced FOUT.
Self hosting: Required.

How may I help improve this plugin?

I’d love to hear your feedback. In particular, tell me about your experience configuring the plugin. Are the instructions clear? Do I need to reword them? Did I leave out something crucial? You get the drift.

I’d like to do more

I’m looking for collaborators to improve the code. If you are an experienced WordPress programmer, hit me up!

I’d like to do even more

Feel free to send a donation to my Paypal account. Or buy me a beer if you’re in town.

Leave a Reply

Your email address will not be published. Required fields are marked *