Freemius

Chris J. Zähller

<p>This plugin implements and automates Zach Leatherman’s <a href="https://github.com/zachleat/web-font-loading-recipes#the-compromise-critical-foft-with-preload-with-a-polyfill-fallback-emulating-font-display-optional" rel="nofollow ugc">“Critical FOFT with preload, with a polyfill fallback emulating font-display: optional”</a> to optimize and speed up web font loading and improve UX by minimizing Flash of Invisible Text, Flash of Unstyled Text, and DOM Reflow.</p>
<h3>Acknowledgement</h3>
<p>This plugin is based on <a href="https://github.com/hlashbrooke/WordPress-Plugin-Template" rel="nofollow ugc">Hugh Lashbrooke’s Starter Plugin</a>, a robust and GPL-licensed code template for creating a standards-compliant WordPress plugin.</p>
<h3>PRO only features</h3>
<ul>
<li>Support for 7 additional font-weights</li>
<li>Small-caps support</li>
<li>Finer-grained control of default CSS</li>
<li>Default options reset</li>
<li>Warn user of unsaved changes when navigating plugin tabs</li>
</ul>
<h3>Configuration</h3>
<h4>Video Tutorials</h4>
<p><a href="https://youtu.be/0C0lDJ3T12o" rel="nofollow ugc">Episode 1. Intro and Background</a></p>
<p><a href="https://youtu.be/-StFYcOSDCU" rel="nofollow ugc">Episode 2. Font Squirrel Generator (WOFF & WOFF2)</a></p>
<h4>Generating and Uploading the Font Files</h4>
<p>Upload two files for each web font: a WOFF file and a WOFF2 file. We recommend you use <a href="https://www.fontsquirrel.com/tools/webfont-generator" rel="nofollow ugc">Font Squirrel’s Webfont Generator</a> to generate the files. Mandatory Font Squirrel settings are:</p>
<pre><code>Select “Expert”
Font Formats:       “WOFF”
                    “WOFF2”
Advanced Options:   “Font Name Suffix” = -webfont
</code></pre>
<p>For detailed recommended settings, see the plugin Upload options screen.</p>
<p><strong>Filenames must follow the proper naming convention:</strong> <code>$family</code>–<code>$variant</code>-webfont.<code>$filetype</code>.</p>
<dl>
<dt><strong>$family</strong></dt>
<dd>The font family base name without style. Case-insensitive. May contain letters, numerals, and underscores but no hyphens or spaces.</dd>
<dt><strong>$variant</strong></dt>
<dd>The font style. Can be weight, style, or a combination of both. <em>Case-sensitive</em>.</dd>
<dt><strong>-webfont</strong></dt>
<dd>Mandatory suffix. Append to $variant.</dd>
<dt><strong>$filetype</strong></dt>
<dd>The file type, i.e., “woff” or “woff2”.</dd>
</dl>
<p><strong>Example</strong>: for the bold weight italic style of Times New Roman, rename the files to timesnewroman-boldItalic-webfont.woff and timesnewroman-boldItalic-webfont.woff2.</p>
<p>Allowed weights and styles and their CSS mappings are:</p>
<ul>
<li>regular | normal (maps to 400)</li>
<li>italic (maps to 400)</li>
<li>boldItalic (maps to 700)</li>
</ul>
<p><strong>For small-caps support and extended font-weight support, please upgrade to</strong> <a href="https://checkout.freemius.com/mode/dialog/plugin/4955/plan/7984/licenses/1/" rel="nofollow ugc"><strong>WP FOFT Loader PRO</strong></a>.</p>
<p>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.</p>
<h4>Subset</h4>
<p>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.</p>
<p><strong>Filenames must follow the proper naming convention:</strong> <code>$family</code>-optimized.<code>$filetype</code>.</p>
<dl>
<dt><strong>$family</strong></dt>
<dd>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.</dd>
<dt><strong>-optimized</strong></dt>
<dd>Mandatory suffix. Append to $family.</dd>
<dt><strong>$filetype</strong></dt>
<dd>The file type, i.e., “woff” or “woff2”.</dd>
</dl>
<p><strong>Example</strong>: 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.</p>
<p>To subset and encode your fonts, we recommend you use Font Squirrel’s Webfont Generator. Mandatory Font Squirrel settings are:</p>
<pre><code>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
</code></pre>
<p>For detailed recommended settings, see the plugin Subset options screen.</p>
<h4>CSS</h4>
<p>@import rules are automatically handled by this plugin. You may manually inline your font-related CSS in the document <code><head></code> here. Place rules pertaining only to the font-family, font-weight, font-style, and font-variation properties here.</p>
<h4>Plugin CSS</h4>
<p>The plugin loads some CSS by default. You may disable it from this screen.</p>
<h4>Font Display</h4>
<p>The plugin uses <code>font-display: swap</code> by default. You can override the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display" rel="nofollow ugc"><code>font-display</code></a> property here.</p>
<h4>CSS Stage 1</h4>
<p>Declarations placed in this field will load subsetted fonts as placeholders while the full fonts load.</p>
<ul>
<li>Use only the family name followed by Subset (case-sensitive)</li>
<li>Family names must match the names you input on the “Subset” screen.</li>
<li>All declarations must start with the fonts-stage-1 class</li>
</ul>
<p>See the Documentation screen to view the Stage 1 CSS that this plugin loads by default.</p>
<p>Incorrect:</p>
<pre><code>.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
}
</code></pre>
<p>Correct:</p>
<pre><code>.fonts-stage-1 .nav-primary {
  font-family: latoSubset, sans-serif;
}
</code></pre>
<h4>CSS Stage 2</h4>
<ul>
<li>Use only the family name</li>
<li>Family names must match the file names for the fonts you uploaded on the “Upload” screen.</li>
<li>Omit weights and styles from the font name</li>
<li>All declarations must start with the fonts-stage-2 class</li>
<li>For best performance, please minify your CSS before pasting it into the form.</li>
</ul>
<p>See the Documentation screen to view the Stage 2 CSS that this plugin loads by default.</p>
<p>Incorrect:</p>
<pre><code>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
}
</code></pre>
<p>Correct:</p>
<pre><code>.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
}
</code></pre>
<p>For best performance, please <a href="https://cssminifier.com/" rel="nofollow ugc">minify your CSS</a> before pasting it into the form.</p>
<h4>Font Stacks</h4>
<p>Change the default font fallbacks in case your custom fonts don’t load. Don’t include the names of your default custom fonts here.</p>
<h4>Further Documentation</h4>
<p>See the Documentation screen to view the CSS this plugin loads by default and to view video tutorials.</p>
<h3>Translations</h3>
<ul>
<li>English: Default language, always included</li>
</ul>
<p>Would you like to help translate WP FOFT Loader into your own language? <a href="https://translate.wordpress.org/projects/wp-plugins/wp-foft-loader" rel="nofollow ugc">You can do that here!</a></p>
<h3>Dependencies</h3>
<p>This plugin includes these third-party libraries in its package.</p>
<ul>
<li><a href="https://github.com/ezyang/htmlpurifier" rel="nofollow ugc">HTMLPurifier</a></li>
<li><a href="https://github.com/Cerdic/CSSTidy" rel="nofollow ugc">CSSTidy</a></li>
<li><a href="https://fontawesome.com" rel="nofollow ugc">Fontawesome</a></li>
</ul>


WP FOFT Loader

Optimize and speed up web font loading and improve UX by minimizing Flash of Invisible Text, Flash of Unstyled Text, and DOM Reflow.

Krasen Slavov

Developry

<p>Elevate your WordPress site with access to the complete range of Google Fonts for enhanced typography and design.</p>
<p><iframe loading="lazy" title="Web Fonts Loader for WordPress" width="750" height="563" src="https://www.youtube.com/embed/R7fBH1zcLUw?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>The <a href="https://webfontsplugin.com/?utm_source=wfl&utm_medium=free_plugin&utm_campaign=readme_md" rel="nofollow ugc"><strong>Web Fonts Loader</strong></a> plugin lets you access and manage Google Fonts, apply global typography settings, and enhance your site’s performance and design.</p>
<p>It’s perfect for anyone looking to elevate their site’s typography with a wide selection of high-quality fonts.</p>
<h3>USAGE</h3>
<p>Once you have successfully installed and activated the <a href="https://webfontsplugin.com/?utm_source=wfl&utm_medium=free_plugin&utm_campaign=readme_md" rel="nofollow ugc"><strong>Web Fonts Loader</strong></a> plugin, your Classic Editor toolbar will be enhanced with two new dropdown menus containing all the available font options.</p>
<h3>Editor Toolbar Customization:</h3>
<ul>
<li><strong>Font Typeface Selection:</strong> The first dropdown in your editor toolbar lets you select the font family. Browse through a variety of Google Fonts to find the perfect match for your content.</li>
<li><strong>Font Weight and Style Selection:</strong> The second dropdown is for font weight and style. Choose from various font weights (from Thin to Black) and styles, including italic versions.</li>
</ul>
<h3>Applying Fonts Site-Wide:</h3>
<p>Go to <code>Web Fonts Loader</code> in your WordPress admin submenu.</p>
<p>This section lets you apply your chosen fonts universally across your site.</p>
<p>Select fonts for your site’s headings and body text to create a consistent and cohesive design.</p>
<h3>Tips for Optimal Use:</h3>
<ul>
<li><strong>Experiment with Combinations:</strong> Try different font families, weights, and styles to find what best suits your site’s design.</li>
<li><strong>Preview Changes:</strong> Always preview your changes to see how the fonts look in real-time.</li>
<li><strong>Maintain Consistency:</strong> Consistent font usage ensures a professional and cohesive web design.</li>
</ul>
<p>By following these tips, you can enhance the visual appeal and readability of your WordPress site with the <a href="https://webfontsplugin.com/?utm_source=wfl&utm_medium=free_plugin&utm_campaign=readme_md" rel="nofollow ugc"><strong>Web Fonts Loader</strong></a> plugin.</p>
<p>Enjoy transforming your website’s typography!</p>
<h3>FEATURES & LIMITATIONS</h3>
<ul>
<li><strong>Typography Presets Library (NEW in 1.6):</strong> Browse ready-to-use font combinations expertly designed for different styles. Quickly apply professional typography with one click and preview fonts before applying them to your site.</li>
<li><strong>Font Performance Monitoring (NEW in 1.6):</strong> Track your font loading performance with real-time metrics. Get optimization scores (0-100) and actionable recommendations to improve site speed. See estimated font sizes and weight counts at a glance.</li>
<li><strong>Dashboard Widget (NEW in 1.6):</strong> Monitor typography statistics directly from your WordPress dashboard. View active fonts, Google Fonts count, system fonts, and performance metrics in a compact 2-column layout for quick insights.</li>
<li><strong>Onboarding Experience (NEW in 1.6):</strong> New users receive a welcoming notice with quick links to configure settings and access documentation, making the initial setup smooth and intuitive.</li>
<li><strong>Extensive Font Selection:</strong> Access a wide array of font variations and styles, including weights from 100 to 900, italics, and more. This feature allows you to precisely tailor the typography to match your website’s unique style.</li>
<li><strong>Customizable for Every Element:</strong> Style headings, blockquotes, and other elements with your chosen fonts. The flexibility to apply fonts to specific page or post elements via the editor (currently compatible with the Classic Editor) enhances your control over site design.</li>
<li><strong>User-Friendly Interface:</strong> Customize the font typeface, weight, and style of your page or post content with just a few clicks. The plugin’s interface is designed for ease of use, catering to both beginners and experienced users.</li>
<li><strong>Dynamic Font Loading:</strong> Utilize the <a href="https://webfontsplugin.com/?utm_source=wfl&utm_medium=free_plugin&utm_campaign=readme_md" rel="nofollow ugc"><strong>Web Fonts Loader</strong></a> by Typekit to load fonts dynamically on a post/page basis. This means you can use different fonts on different pages, and only the fonts applied will load on the front-end, ensuring efficient performance.</li>
<li><strong>Performance-Oriented:</strong> The lightweight design ensures that loading fonts on the front end does not affect your page’s loading speed. Now with built-in performance monitoring to track and optimize font usage.</li>
<li><strong>Expansive Font Families and Variations:</strong> Choose from popular font families like Roboto, Open Sans, Lato, and more, along with their variations such as Roboto Condensed, Open Sans Condensed, and Montserrat Alternates.</li>
<li><strong>Rich Font Weights and Styles:</strong> Select from a comprehensive range of font weights (Thin to Black) and styles (including various italic options), offering unparalleled customization options.</li>
<li><strong>Responsive and Cross-Browser Compatibility:</strong> Ensures a consistent and responsive typography experience across different devices and browsers. All new features are fully responsive and mobile-optimized.</li>
<li><strong>Regular Updates and Support:</strong> Stay up-to-date with the latest font trends and receive dedicated support for any queries or assistance.</li>
</ul>
<p><strong>Ideal for:</strong> This plugin is ideal for anyone looking to elevate their website’s typography, whether for improved readability, enhanced brand identity, or to create a more visually appealing design. The <em>Web Fonts Loader</em> plugin provides the tools needed for a complete typographic makeover, now with performance insights and ready-to-use presets.</p>
<h3>DETAILED DOCUMENTATION</h3>
<p>Find step-by-step setup guides, usage instructions, demos, videos, and insights on the <a href="https://webfontsplugin.com/help" rel="nofollow ugc"><strong>Web Fonts Loader Pro</strong></a> page.</p>
<h3>WEB FONTS LOADER PRO</h3>
<p>If you’re using the free version from WordPress.org and want Pro features, you can purchase the premium version on the <a href="https://webfontsplugin.com/?utm_source=wfl&utm_medium=free_plugin&utm_campaign=readme_md" rel="nofollow ugc"><strong>Web Fonts Loader Pro</strong></a> website.</p>
<p>Here are some features included in the Pro version:</p>
<ul>
<li>Google Developer API integration.</li>
<li>Manage Global Fonts and add custom rules.</li>
<li>Font Manager feature to delete, download, and @import any fonts.</li>
<li>Block editor support alongside Classic Editor integration.</li>
<li>Load custom fonts locally to comply with EU/GDPR guidelines and boost website performance.</li>
<li>User-defined Google Fonts, system fonts, and Gutenberg blocks.</li>
<li>Include Google italic fonts and select supported subsets.</li>
<li>Font usage summary, report generation, and reset options.</li>
<li>Priority support and regular updates for one year included in <a href="https://webfontsplugin.com/?utm_source=wfl&utm_medium=free_plugin&utm_campaign=readme_md" rel="nofollow ugc"><strong>Web Fonts Loader Pro</strong></a>.</li>
</ul>


Web Fonts Loader – Google Fonts Manager

Currently, the page & post functionality is only available for the Classic Editor (soon we will support blocks as well); you can still apply global fonts via the options page.

Works great!

Elevate your WordPress site with access to the complete range of Google Fonts for enhanced typography and design.

WP FOFT Loader vs Web Fonts Loader – Google Fonts Manager