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 open it:
- In your WordPress dashboard, go to Appearance → Pixelgrade Design.
- Open the Design System tab.
- Find the Typography card and click Manage Typography. This opens Style Manager inside the Site Editor, in the Typography section.
Style Manager is organized into a handful of sections — Color System, Typography, Spacing, Tweak Board, and Motion. Manage Typography drops you straight into Typography, which is where every font choice lives.
If you prefer, you can also open the Site Editor directly from Appearance → Editor, open Style Manager, and choose the Typography section there.
Once you're in the Typography section, you'll see two areas:
- Font Palettes — a collection of ready-made 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 well across your Pixelgrade LT site.
- Individual font controls — Font Primary, Font Secondary, Font Body, and Font Accent, for those who want to dig a little deeper and set their fonts by hand.
Although you have access to over 600 fonts, we suggest you follow our advice and use a maximum of two or three fonts for all areas of your website.
Making advanced font customizations
Although we recommend this step only to professionals, you can dig a bit deeper and take a more granular approach — assign each of the four font roles (Primary, Secondary, Body, Accent) and fine-tune the font sizing and elevation across your headings and text. These controls live in the same Typography section you opened above.
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. It works automatically in the background, so you can be certain your website displays the right font sizes on all gadgets — one worry less.
Custom and premium fonts
The built-in font library in Style Manager covers most needs. If you're after a specific brand or self-hosted font that isn't in the library:
- Check the font palettes and the font library inside Style Manager first — the font you want may already be available.
- If it isn't, you can add your own with the Fonto plugin, then select it in Style Manager. See How to add custom fonts to your WordPress website for the full walkthrough.
Where to get help
Everything above lives under one roof: Appearance → Pixelgrade Design. The Design System tab is your entry point for fonts (and colors and spacing), and the Help tab is where you can search the documentation or contact us if you get stuck.