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.

Brainstorm Force

<p><strong>HOST FONTS, IMPROVE WEBSITE SPEED, AND ELIMINATE PRIVACY CONCERNS</strong></p>
<p>★★★★★</p>
<h3>IMPROVED SPEED AND PERFORMANCE 🚀</h3>
<p>Custom Fonts enables you to upload your own custom fonts or choose from a vast collection of Google Fonts, all hosted directly on your own web server.</p>
<p>By hosting fonts locally, you can significantly improve your website’s performance. As the fonts load directly from your server, it reduces external requests, significantly reducing page load times.</p>
<p><a href="https://bsf.io/custom-fonts-demo" rel="nofollow ugc">Try it out on a free dummy site</a></p>
<h3>UPLOAD YOUR CUSTOM FONTS OR CHOOSE FROM GOOGLE FONTS 🎨</h3>
<p>With Custom Fonts, you have the freedom to customize your website typography to match your unique brand identity!</p>
<p>You can easily upload your own custom font files, such as .ttf or .otf, and use them throughout your website. Or, you can choose from a rich library of Google Fonts and host them locally on your server, ensuring full control over their use.</p>
<h3>UPLOAD MULTIPLE FONT VARIANTS 🆒</h3>
<p>You have the flexibility to upload any number of font variants to suit your design needs. Whether it’s different weights, styles, or character sets, easily manage and customize the necessary font variants. Personalize your typography to perfection and create a unique visual identity for your website.</p>
<h3>ENHANCED PRIVACY AND GDPR COMPLIANCE 🛡️</h3>
<p>Privacy is a top priority, especially in light of data protection regulations like GDPR. By using Custom Fonts, you can self-host your fonts, eliminating any privacy concerns associated with external font services. Take full control over the fonts you use on your website and ensure compliance with privacy regulations.</p>
<h3>FULL SITE EDITING THEME SUPPORT AND EASY INTEGRATION 🎉</h3>
<p>Custom Fonts seamlessly integrates with WordPress full site editing themes, allowing you to effortlessly choose and customize fonts across your entire website. Say goodbye to limitations and enjoy the freedom to create a consistent and visually appealing typography experience for visitors.</p>
<h3>BEAUTIFUL AND USER-FRIENDLY INTERFACE MADE WITH REACT JS 💻</h3>
<p>We take pride in providing an elegant and intuitive user interface for Custom Fonts. Built with React JS, our interface offers a seamless experience, making it easy to upload and manage custom fonts, select from Google Fonts, and customize typography settings to suit your needs.</p>
<h3>COMPLETELY FREE, NO UPSELLS OR HIDDEN COSTS 🆓</h3>
<p>Custom Fonts is completely free, with no upsells or hidden costs. We believe in empowering website owners with essential tools without nickel-and-diming. Enjoy full access to all the features and functionality of Custom Fonts.</p>
<h3>WHO CAN BENEFIT FROM CUSTOM FONTS?</h3>
<ol>
<li>
<p><strong>Web designers and developers:</strong> You can easily enhance the typography and overall design of your projects, making them stand out from the crowd.</p>
</li>
<li>
<p><strong>eCommerce store owners:</strong> Custom fonts can enhance your brand identity and provide a distinctive visual style for product descriptions, banners, and more. Hosting fonts locally with Custom Fonts improves website performance, benefiting you and your consumers.</p>
</li>
<li>
<p><strong>Bloggers and content creators:</strong> Make your content truly pop. Stand out from the crowd and captivate your audience with Custom Fonts.</p>
</li>
<li>
<p><strong>SEO experts:</strong> You can now boost page speed by hosting fonts locally with Custom Fonts. Fewer external requests means faster loading times! Plus, you ensure compliance with privacy regulations.</p>
</li>
</ol>
<p>Custom Fonts caters to anyone who values the customization of typography, performance optimization, privacy control, and compliance with regulations.</p>
<p>If you want to take control of your website’s typography and enhance its overall appearance, Custom Fonts is the plugin for you!</p>
<h3>SOME OF THE SUPPORTED WORDPRESS THEMES:</h3>
<ul>
<li><a href="http://wpastra.com/" rel="nofollow ugc">Astra WordPress Theme</a></li>
<li><a href="https://wordpress.org/themes/spectra-one/" rel="ugc">Spectra One Theme</a></li>
<li>All FSE themes</li>
</ul>
<h3>SOME OF THE SUPPORTED WORDPRESS PLUGINS:</h3>
<ul>
<li>Spectra Page Builder</li>
<li>Elementor Page Builder</li>
</ul>
<p><strong>Branding Guidelines</strong></p>
<p>When mentioning Custom Fonts, please use the following format:</p>
<ul>
<li>Custom Fonts [correct]</li>
<li>CustomFonts [incorrect]</li>
<li>Custom fonts [incorrect]</li>
<li>CustomFont [incorrect]</li>
<li>Customfont [incorrect]</li>
</ul>
<p><strong>Our Other Products:</strong></p>
<ul>
<li><a href="https://wpastra.com/" rel="nofollow ugc">Astra</a> – The most popular WordPress theme that perfectly integrates with Custom Fonts.</li>
<li><a href="https://wpspectra.com/" rel="nofollow ugc">Spectra</a> – A visual website builder built with WordPress’ native block editor.</li>
<li><a href="https://ultimateelementor.com/" rel="nofollow ugc">Ultimate Addons for Elementor</a> – The best addons to extend Elementor’s capabilities.</li>
<li><a href="https://wpschema.com/" rel="nofollow ugc">Schema Pro</a> – All-in-one schema markup plugin that offers complete functionality and easy configuration.</li>
<li><a href="https://projecthuddle.com/" rel="nofollow ugc">ProjectHuddle</a> – Lets you collect sticky note-style feedback on page designs and web projects.</li>
</ul>
<p><strong>Other partnered products:</strong></p>
<ul>
<li><a href="https://cartflows.com/" rel="nofollow ugc">CartFlows</a> – One-click sales funnel builder for WordPress.</li>
<li><a href="https://prestoplayer.com/" rel="nofollow ugc">Presto Player</a> – Best video player plugin for WordPress.</li>
<li><a href="https://surecart.com/" rel="nofollow ugc">SureCart</a> – A powerful eCommerce platform designed to grow your business by effortlessly selling online.</li>
<li><a href="https://suremembers.com/" rel="nofollow ugc">SureMembers</a> – Fastest and easiest way to protect content on your website and build memberships.</li>
<li><a href="https://ottokit.com/" rel="nofollow ugc">OttoKit</a> – Connects your favorite tools so you can automate workflows and streamline your business processes.</li>
<li><a href="https://www.surewriter.com/" rel="nofollow ugc">SureWriter</a> – AI writing tool to make your web design journey faster.</li>
</ul>


Custom Fonts – Host Your Fonts Locally

Looks nice, but does not work with Oxygen Builder

Does not work with Oxygen Builder

Just works

Custom Fonts is a powerful WordPress plugin that allows you to upload your own custom fonts or choose from a vast collection of Google Fonts, all host …

The Typography vs Custom Fonts – Host Your Fonts Locally