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.

kontur.us

<p>We are going wild with the fonts in the Gutenberg RichText editor toolbar. Change font family and/or size on each word or even a single letter – just as you like! This one is for the font-lovers. You can set up to 5 fonts. And even can set CSS-classes you want them as well to be applied to. In addition, you can specify, name and select up to 4 font weights and font sizes.</p>
<p>Take a walk on the wild font side</p>
<ul>
<li><strong>add up to 5 custom fonts to your editor blocks</strong> (Gutenberg)</li>
<li>set your individual CSS-classes you want those fonts to be applied to </li>
<li>set <strong>up to 4 individual font sizes</strong></li>
<li>set <strong>up to 4 different font weights</strong></li>
<li>fonts and sizes can be even applied to a single word OR even single letters!</li>
</ul>
<h3>Font family</h3>
<p><strong>Change the font for individual words, phrases or even letters inline in the Gutenberg editor.</strong><br />
This works automatically for most blocks <em>(“Paragraph Block”, “Heading Block”…)</em>.<br />
On the settings page you can activate up to 5 fonts and give them friendly names. And at the same time enter several CSS classes to which these fonts should be assigned.<br />
<em>Being able to name the fonts can be very handy for the other editors on your site as they rarely know the font names, only where they are used most of the time. So you could just name your heading font “our headings” etc. for easier work.</em></p>
<h3>Font size</h3>
<p><strong>Up to four font sizes can be set.</strong><br />
The font sizes can also be named to make it easier for editors to use in the Gutenberg editor.</p>
<p>The font size is calculated as a percentage of the base font size. Changing a font size setting on the settings page will change that font size across the site.</p>
<p>Font sizes can be assigned inline in the editor to sentences, words or even individual letters.</p>
<h3>Font weight</h3>
<p>Set up to 4 different font weights from 200 to 900 and give the font weights their own names to make them easier for editors to use. Example: You could call the font weight 900 <em>“supder-duper bold”</em>. Just be creative, it’s your backend!</p>
<h3>Demo</h3>
<p>Want to play around with it?<br />
Check the<br />
<a href="https://playground.wordpress.net/?blueprint-url=https%3A%2F%2Fwordpress.org%2Fplugins%2Fwp-json%2Fplugins%2Fv1%2Fplugin%2Fkontur-font-o-mat%2Fblueprint.json%3Furl_hash%3De9ae0e399a1597d01f2040a9b7b5a627" rel="nofollow ugc">Demo on WordPress Playground</a></p>
<blockquote>
<p><strong>Want more</strong><br />
    Please get involved and send uns your ideas. Via email or on the WordPress support page 🙂</p>
</blockquote>
<p><strong>Uninstalling</strong></p>
<p>This plugin cleans up after itself. All plugin settings will be removed from your database when the plugin is uninstalled via the Plugins screen.</p>


kontur font-o-mat

Going wild with fonts on Gutenberg editor!

The Typography vs kontur font-o-mat