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.

<p>Brighten up your blog with Web fonts from google. Take a look at the <a href="https://wordpress.org/extend/plugins/wp-web-fonts/screenshots/" rel="ugc">screenshots area</a> area to give you an idea how easy it is.<br />
Search hundreds of web font families for example on http://www.google.com/webfonts, then add the one you like to your Blog!</p>


WP Web Fonts

Brighten up your blog with Web fonts from google. Take a look at the screenshots area area to give you an idea how easy it is.

WP FOFT Loader vs WP Web Fonts