Changing Fonts

We are a design-centered studio that shares a real passion for typography and all its characteristics: from admeasurement and spacing to hierarchy. That’s why we have a strong focus on offering you enough room to find the right match between the type layer and your unique branding approach.

Pairing fonts together in a manner that makes them look good and complement each other is no easy task (unless you are an experienced designer). Choosing the correct fonts for your website’s design can be the difference between a compelling and attractive website and a dull, ordinary one.

Fonts make a difference in the type of message you want to send to the world and how you present yourself. If you aim to show playfulness, joy, and quirkiness, you can’t settle just with the words; your fonts need to match that. And, when it comes to a website, there are a lot of areas where your text shows up, so a lot more ways to mess things up.

Here are two rules that, if you follow, should place you on the safe side:

• Limit yourself to only a few fonts: it’s best to stick with two fonts, but if you’re feeling ambitious, three is the maximum.
• Always use headings to create hierarchy and coherence within the structure of a page or a blog post.

Choosing the right font palette

To help you overcome this challenge and limit the number of (bad) decisions you can make, we created Style Manager—an intuitive system that lets you choose between predefined font palettes or create your own in just a few steps.

To access and use it, go to your WordPress Dashboard (the admin area) and navigate to Appearance → Customize → Style Manager → Fonts. Once you’re there, you’ll see two areas:

• Palettes – here you’ll find a collection of ready-made font palettes that you can instantly apply across your website. We’ve used our vast experience in this area to make the perfect combinations that work with your theme.
• Advanced – this tab is for those who want to dig a little deeper and customize their fonts manually. Although you have access to over 600 fonts, we suggest to follow our advice and use a maximum of two-three fonts for all areas of your website.

Below you can see a demo for the Fonts options from Style Manager. The demo features Gema, one if our WordPress themes, but the process is the same for Patch.

Making advanced font customizations

Although we recommend this step only to professionals, you can dig a bit deeper and have a more granular approach to your fonts, like changing the font for each Heading element or only for the Blog Posts. If you fit in this category, navigate to Appearance → Customize → Theme Options, and in the following sub-sections, you will find all the available font options:

• Header: set the font for the Navigation Text;
• Main Content: change the Page Title Font, Body Text Font, Quote Block Font, and Headings Fonts (H1→H6);
• Blog Grid Items: change the Item Title Font.

To help you even more, we developed an automated calculation system to accurately and correctly adjust fonts and sizes for all devices—mobile, desktop, tablets, and everything in between. Thanks to this tool, you can now be certain that your website displays the right font sizes on all gadgets—one worry less. If you want to learn more about our process of creating true fluid web typography and our approach to responsive web design, you can read this article.

Using Premium Fonts

If you want to go even further, you can always appeal to custom fonts. You can quickly make that happen through seamless integration with Fonto, our custom fonts management plugin. For further details on how to use it, you can read this helpful article.