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.

WPMajestic

<p>Live Font Preview for WooCommerce allows you to offer real-time text previews with a variety of fonts for your customizable products. This empowers customers to see exactly what their personalized items will look like, increasing confidence and conversion rates.</p>
<p>Perfect for stores selling engraved jewelry, custom apparel, embroidery, or personalized gifts, this plugin adds a sleek font selection dropdown and text input field directly to your product pages.</p>
<p><strong>Key Features:</strong></p>
<ul>
<li><strong>Real-Time Preview:</strong> Customers see exactly how their text looks in their chosen font instantly</li>
<li><strong>Google Fonts Integration:</strong> Securely loads high-quality fonts for accurate rendering</li>
<li><strong>Flexible Display Logic:</strong> Enable globally, per category, or for specific products only</li>
<li><strong>High-Performance Order Storage (HPOS) Compatible</strong></li>
<li><strong>Cart & Order Integration:</strong> Selected fonts and text are clearly displayed in the cart, checkout, and order emails</li>
<li><strong>Customizable Labels:</strong> Easily change field labels and placeholders to match your store’s language</li>
<li>Compatible with WooCommerce Blocks checkout</li>
<li>Compatible with classic WooCommerce checkout</li>
</ul>
<h3>Usage</h3>
<ol>
<li>Navigate to <code>WooCommerce <span aria-hidden="true" class="wp-exclude-emoji">→</span> Live Font Preview</code> in your WordPress admin.</li>
<li>Enable the feature globally or select specific categories/products.</li>
<li>Choose which Google Fonts you want to offer to your customers.</li>
<li>Save your settings.</li>
<li>Visit a product page to see the live font selector in action.</li>
</ol>


Live Font Preview for WooCommerce

Allow customers to preview and select fonts for custom engravings and text on WooCommerce products with a real-time live preview.

The Typography vs Live Font Preview for WooCommerce