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.

pepe

kingjeffrey

<p>Improve your web typography with:</p>
<ul>
<li>
<p>Hyphenation — <a href="https://code.mundschenk.at/wp-typography/frequently-asked-questions/#faq-what-hyphenation-language-patterns-are-included" rel="nofollow ugc">over 70 languages supported</a></p>
</li>
<li>
<p>Space control, including:</p>
<ul>
<li>widow protection</li>
<li>gluing values to units</li>
<li>forced internal wrapping of long URLs & email addresses</li>
</ul>
</li>
<li>
<p>Intelligent character replacement, including smart handling of:</p>
<ul>
<li>quote marks</li>
<li>dashes</li>
<li>ellipses</li>
<li>trademarks, copyright & service marks</li>
<li>math symbols</li>
<li>fractions</li>
<li>ordinal suffixes</li>
</ul>
</li>
<li>
<p>CSS hooks for styling:</p>
<ul>
<li>ampersands,</li>
<li>uppercase words,</li>
<li>numbers,</li>
<li>initial quotes & guillemets.</li>
</ul>
</li>
</ul>


wp-Typography

Improve your web typography with: hyphenation, space control, intelligent character replacement, and CSS hooks.

The Typography vs wp-Typography