WP FOFT Loader
Wordpress plugin
App Details
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. See https://github.com/zachleat/web-font-loading-recipes#the-compromise-critical-foft-with-preload-with-a-polyfill-fallback-emulating-font-display-optional.
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 <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 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.
Pricing
Starting from $0 per month.
App Info
Rating
Reviewers
No reviews
Tags
Developed By
Chris J. Zähller
Quick & Easy
Find the Best Wordpress plugins for you
Common Ninja has a large selection of powerful Wordpress plugins that are easy to use, fully customizable, mobile-friendly and rich with features — so be sure to check them out!
Testimonial
Testimonial plugins for Wordpress
Contact Form
Contact Form plugins for Wordpress
Maps
Maps plugins for Wordpress
Translation
Translation plugins for Wordpress
Chat
Chat plugins for Wordpress
Slider
Slider plugins for Wordpress
Reviews
Reviews plugins for Wordpress
Contact
Contact plugins for Wordpress
Galleries
Galleries plugins for Wordpress
SEO
SEO plugins for Wordpress
Forms
Forms plugins for Wordpress
Comments
Comments plugins for Wordpress
Backup
Backup plugins for Wordpress
Privacy
Privacy plugins for Wordpress
Optimize
Optimize plugins for Wordpress
Tabs
Tabs plugins for Wordpress
Social Sharing
Social Sharing plugins for Wordpress
Events Calendar
Events Calendar plugins for Wordpress
Comments
Comments plugins for Wordpress
Social Feeds
Social Feeds plugins for Wordpress
Social Sharing
Social Sharing plugins for Wordpress
Portfolio
Portfolio plugins for Wordpress
Video Player
Video Player plugins for Wordpress
popup
popup plugins for Wordpress
SiteMap
SiteMap plugins for Wordpress
Payment
Payment plugins for Wordpress
Coming Soon
Coming Soon plugins for Wordpress
Inventory
Inventory plugins for Wordpress
Testimonials
Testimonials plugins for Wordpress
Portfolio
Portfolio plugins for Wordpress
Membership
Membership plugins for Wordpress
Forms
Forms plugins for Wordpress
Analytics
Analytics plugins for Wordpress
Events Calendar
Events Calendar plugins for Wordpress
Sliders
Sliders plugins for Wordpress
Analytics
Analytics plugins for Wordpress
Reviews
Reviews plugins for Wordpress
Security
Security plugins for Wordpress
Ads
Ads plugins for Wordpress
Music Player
Music Player plugins for Wordpress
Countdown
Countdown plugins for Wordpress
Email Marketing
Email Marketing plugins for Wordpress
Membership
Membership plugins for Wordpress
Ecommerce
Ecommerce plugins for Wordpress
Customer Support
Customer Support plugins for Wordpress
Video Player
Video Player plugins for Wordpress
Tabs
Tabs plugins for Wordpress
Social Feeds
Social Feeds plugins for Wordpress
Common Ninja Apps
Some of the best Common Ninja plugins for Wordpress
Browse our extensive collection of compatible plugins, and easily embed them on any website, blog, online store, e-commerce platform, or site builder.
Team Member Flip Cards
Show your team with interactive team member flip cards that build trust, support transparency, and help visitors connect with the people behind your brand.
Diagrams
Create interactive diagrams with a diagrams widget that lets you build and customize flow charts, improve clarity, and help visitors understand complex ideas easily.
Testimonials Slider
Add a testimonials slider to your site to showcase real customer feedback, build credibility, and increase trust that leads to higher conversions.
3D Cards
3D cards that highlight important information with depth and motion, capture attention instantly, and help visitors navigate content more effectively.
Corner Button
Corner button that stays fixed on the screen to highlight promotions, improve navigation, and guide visitors toward important actions with clear visibility.
Accordion
Add collapsible content sections to your site to organize information and help users navigate content more efficiently.
Virtual Tour
Create immersive 360 virtual tours with interactive hotspots that let visitors explore spaces, view details clearly, and experience panoramic environments seamlessly.
Timeline
Use a timeline widget to display events and milestones in chronological order with images and text so visitors understand your story clearly.
YouTube Carousel
Show YouTube videos with a YouTube carousel that displays clips in a smooth, customizable layout to boost visibility and keep visitors engaged.
Tripadvisor Reviews
Show Tripadvisor reviews to build trust, improve credibility, and help visitors make confident booking decisions that support higher property sales.
Social Votes
Encourage interaction with social votes that let visitors like, upvote, and rank content, boosting engagement and guiding better decisions.
Code Snippets
Display clean code snippets with syntax highlighting to improve technical content and help developers scan examples quickly.
More plugins
plugins You Might Like
Discover Apps By Platform
Discover the best apps for your website
Common Ninja Search Engine
The Common Ninja Search Engine platform helps website builders find the best site widgets, apps, plugins, tools, add-ons, and extensions! Compatible with all major website building platforms - big or small - and updated regularly, our Search Engine tool provides you with the business tools your site needs!
