FirstElement

<p>This is a plugin for WordPress that allows for re-rendering a multi-rowed long headlines more beautiful and more impressive without any conversion from text to image. It uses the effect of a great jQuery plugin <a href="http://www.frequency-decoder.com/demo/slabText/" rel="nofollow ugc">slabText</a> that was created by Brian McAllister.</p>
<p>You can split a long title at any point as you like with ||(double-pipe) into multi-row, so multibyte language sites can also recieve the benefit.</p>
<p>Even more, can specify the font to use in a title from <a href="http://www.google.com/webfonts" rel="nofollow ugc">Google Web Fonts</a>.</p>
<p>このプラグインは、ブログやニュース系サイトによく見られる複数行に渡る長い記事の見出しを、画像に変換することなく、より美しく、インパクトのあるものに再描画します。Brian McAllister氏のjQueryプラグイン「<a href="http://www.frequency-decoder.com/demo/slabText/" rel="nofollow ugc">slabText</a>」の効果を使用します（英文の様々なサンプルはリンク先でご覧になれます）。</p>
<p>記事タイトルの任意の位置に ||（パイプ2本）を入力することで、行の折り返しポイントを決めることができるので、日本語（マルチバイト）サイトでも効果を得られます。</p>
<p>レスポンシブWebデザインに対応しています。</p>
<p>見出しに使用するフォントを、<a href="http://www.google.com/webfonts" rel="nofollow ugc">Google Web Fonts</a>から指定することもできます（欧文フォントのみ）。</p>
<h4>Requires</h4>
<p>The template must have call <code>post_class</code> function at outer box of the post title in the loop.<br />
If you use <a href="https://wordpress.org/extend/plugins/head-cleaner/" rel="ugc">Head Cleaner</a>, I recommend to excludes <code>wpstxt-call</code> from the list of <code>Active Filters</code>.</p>
<h4>Donate?</h4>
<p>If you feel good with using this plugin, your support is always welcome. I’ve setup <a href="http://fe-labs.net/donate/" rel="nofollow ugc">a donation page</a>.</p>
<h4>Updates</h4>
<p>Plugin updates are announced on <a href="http://fe-labs.net/plugins/wp-slabtext/" rel="nofollow ugc">plugins page</a>, and <a href="http://twitter.com/firstelement" rel="nofollow ugc">http://twitter.com/firstelement</a>.</p>
<h3>Contact and Credits</h3>
<p>Written by Daijiro Miyazawa at FirstElement (<a href="http://www.firstelement.jp/" rel="nofollow ugc">www.fisrtelement.jp</a>, e-mail ‘dxd5001’ at ‘gmail dot com’), 2012.</p>
<p>WP slabText includes a copy of the <a href="http://www.frequency-decoder.com/demo/slabText/" rel="nofollow ugc">slabText</a> written by Brian McAllister.</p>


WP slabText

Allows for re-rendering a multi-rowed long headlines more beautiful and more impressive.

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.

WP slabText vs WP FOFT Loader