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.

Eric Alli

<p>The Google Typography plugins allows you to use any <a href="http://www.google.com/fonts" rel="nofollow ugc">Google Font</a> for any text on your existing website without writing a single line of code. In the Appearance > Typography settings page, simply add and customize as many fonts as you’d like, then apply it to any existing HTML tag or CSS selector.</p>


Google Typography

A simple plugin that lets you use and customize (in real-time!) any fonts from Google Fonts on your existing WordPress site.

The Typography vs Google Typography