Alvaro

<p><a href="https://gutenberg-showcase.melonpan.io/the-typography" rel="nofollow ugc">Demo</a> – <a href="https://melonpan.io/wordpress-plugins/the-typography" rel="nofollow ugc">Documentation</a> – <a href="https://github.com/garciaalvaro/the-typography" rel="nofollow ugc">GitHub</a></p>
<p>Add Typography to your Gutenberg site using Google Fonts. Enter CSS selectors or select Blocks to apply custom typography.</p>
<h3>Typography style</h3>
<p>Available typography options include:</p>
<ul>
<li>Font family & variants from Google Fonts</li>
<li>Color (hex or rgba)</li>
<li>Font size</li>
<li>Line height</li>
<li>Font weight</li>
<li>Font style (italic, normal, oblique)</li>
<li>Letter spacing</li>
<li>Text transform (capitalize, uppercase, lowercase)</li>
<li>Text decoration (line-through, overline, underline)</li>
</ul>
<h3>Typography context</h3>
<p>Typographies can be assigned to a specific context:</p>
<ul>
<li>All site</li>
<li>Post types/s (post types available on the site)</li>
<li>Post types/s template (index, single)</li>
<li>Front page</li>
<li>404 page</li>
</ul>
<h3>Typography selectors</h3>
<p>Each typography can have several groups of selectors with unique modifications based on the root typography.<br />
For example: a typography can be set with a certain Font, Color and Font size;<br />
each of its groups of selectors inherit those properties and one could modify the inherited color and other the inherited Font size.</p>
<p>Available CSS selectors include:</p>
<ul>
<li>Text CSS selector (eg: .site-title a)</li>
<li>Block Selector (eg: Block Quote > Citation)</li>
</ul>
<h3>Usage</h3>
<p>The plugin can be accesed from the Customizer inside the tab <strong>The Typography</strong>.<br />
It can also be accesed from any Block editor’s <strong>The Typography</strong> sidebar (top right corner of the editor).<br />
Create a typography and assign it some options; create a group of selectors and inside it create some CSS or Block selectors.<br />
That’s it!<br />
If you want to preview the different fonts before selecting one you can preview them in the <a href="https://fonts.google.com/" rel="nofollow ugc">Google Fonts repository</a>.<br />
<strong>Note</strong>: The typography editing is assigned to the ‘edit_theme_options’ capability. This means that, by default, only admin and super admin will be able to use the features.</p>


The Typography

Add Typography to your Gutenberg site using Google Fonts.

pixelgrade

vlad.olaru

George Olaru

<p>Fonto is a custom fonts management plugin that will seamlessly integrate with the WordPress editor, allowing you to get right to using your fancy free or premium fonts.</p>
<p>It is built to work with pretty much any configuration font vendors offer (like Typekit, Fonts.com, MyFonts.com, Google Fonts), either by allowing them to serve the fonts via an embed code or by self-hosting the font files.</p>
<p>Plus, we’ve integrated Fonto with our <a href="https://wordpress.org/plugins/customify/" rel="ugc">Customify</a> and <a href="https://wordpress.org/plugins/style-manager/" rel="ugc">Style Manager</a> plugins to make it even smoother to control your site’s general typography.</p>
<h3>Credits</h3>
<ul>
<li><a href="https://github.com/CMB2/CMB2" rel="nofollow ugc">CMB2</a> Metaboxes, custom fields library – License: GPLv2 or later</li>
<li><a href="https://github.com/jcchavezs/cmb2-conditionals/" rel="nofollow ugc">CMB2 Conditionals</a> plugin for CMB2 – License: GPLv2 or later</li>
</ul>


Fonto – Custom Web Fonts Manager

Very happy with this plugin. The only things missing are import/export functions, so I don't have to configure the fonts for each site.
Nevertheless, thanks, and well done!



This plugin is near perfect!

Use custom premium web fonts in the editor, Customify, and Style Manager.

The Typography vs Fonto – Custom Web Fonts Manager