內容簡介
WP FOFT Loader 外掛旨在優化網頁字型加載，透過自動化處理 Zach Leatherman 的「關鍵 FOFT」技術，減少文字閃爍現象，提升使用者體驗。
【主要功能】
• 自動化字型加載優化
• 減少文字閃爍與重排現象
• 支援 7 種額外字型粗細
• 小型字母支援
• 更細緻的 CSS 預設控制
• 提醒使用者未儲存的變更
外掛標籤
開發者團隊
原文外掛簡介
This plugin implements and automates Zach Leatherman’s “Critical FOFT with preload, with a polyfill fallback emulating font-display: optional” to optimize and speed up web font loading and improve UX by minimizing Flash of Invisible Text, Flash of Unstyled Text, and DOM Reflow.
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.
PRO only features
Support for 7 additional font-weights
Small-caps support
Finer-grained control of default CSS
Default options reset
Warn user of unsaved changes when navigating plugin tabs
Configuration
Video Tutorials
Episode 1. Intro and Background
Episode 2. Font Squirrel Generator (WOFF & WOFF2)
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: $family–$variant-webfont.$filetype.
$family
The font family base name without style. Case-insensitive. May contain letters, numerals, and underscores but no hyphens or spaces.
$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 timesnewroman-boldItalic-webfont.woff and timesnewroman-boldItalic-webfont.woff2.
Allowed weights and styles and their CSS mappings are:
regular | normal (maps to 400)
italic (maps to 400)
boldItalic (maps to 700)
For small-caps support and extended font-weight support, please upgrade to WP FOFT Loader PRO.
This plugin supports 1 – 4 font families. For example, you might have a display font for headings, a serif-font for body text, a sans-serif font for UI elements, such as navigation labels, and a monospaced font for tabular data and code examples.
Subset
Upload up to 4 small, subsetted fonts. For each font, upload a WOFF & WOFF2 file (for a total of up to 8 files). Each font will act as a placeholder until the full fonts load.
Filenames must follow the proper naming convention: $family-optimized.$filetype.
$family
The font family base name without style. Case-insensitive. May contain letters, numerals, and underscores but no hyphens or spaces. Each $family base name should match the name used for the matching font uploaded on the previous upload screen.
-optimized
Mandatory suffix. Append to $family.
$filetype
The file type, i.e., “woff” or “woff2”.
Example: If you uploaded timesnewroman-regular-webfont.woff and timesnewroman-regular-webfont.woff2 as your body font on the previous screen, name the subsetted versions timesnewroman-optimized.woff and timesnewroman-optimized.woff2 respectively.
To subset and encode your fonts, we recommend you use Font Squirrel’s Webfont Generator. Mandatory Font Squirrel settings are:
Select “Expert”
Font Formats: “WOFF”
“WOFF2”
Fix Missing Glyphs: None
Subsetting: “Custom Subsetting” with the Unicode Ranges 0065-0041-005A,0061-007A
Leave everything else unchecked
OpenType Features: None
OpenType Flattening: None
CSS: Leave unchecked
Advanced Options: “Font Name Suffix” = -optimized
For detailed recommended settings, see the plugin Subset options screen.
CSS
@import rules are automatically handled by this plugin. You may manually inline your font-related CSS in the document
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 subsetted fonts as placeholders while the full fonts load.
Use only the family name followed by Subset (case-sensitive)
Family names must match the names you input on the “Subset” screen.
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 class: .fonts-stage-1
font-family: latoSubset, sans-serif;
}
.fonts-stage-1 #footer-secondary {
font-family: lato, san-serif; // Missing “Subset” suffix
}
.fonts-stage-1 div.callout {
font-family: latoSubset, san-serif;
font-size: 1rem; // “font-family,” “font-weight,” “font-style,”
// and “font-variant” rules only
}
.fonts-stage-1 div.callout {
font-family: latosubset, san-serif; // “Subset” suffix is case-sensitive
}
Correct:
.fonts-stage-1 .nav-primary {
font-family: latoSubset, sans-serif;
}
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
Would you like to help translate WP FOFT Loader into your own language? You can do that here!
Dependencies
This plugin includes these third-party libraries in its package.
HTMLPurifier
CSSTidy
Fontawesome
