How to Setup & Change Fonts in GeneratePress Theme

If you’re using the GeneratePress theme and wondering how to update typography and font choices across your site, this guide will walk you through the process. Whether you’re starting from scratch or already have fonts set up and want to make changes, GeneratePress makes it easy to control your typography sitewide.

Scenario 1: Setting Up Typography in GeneratePress from Scratch

Let’s start by looking at a scenario where you’re using GeneratePress without any typography settings in place. Here’s how you can set up your fonts sitewide:

1. Access the Customizer: Go to your WordPress dashboard and navigate to Appearance > Customize. Once in the customizer, select the Typography panel.
2. Add Your Fonts: In the Typography settings, click Add Font. This is where you’ll choose the fonts that will be loaded onto your site.
   • For example, let’s select Red Hat Display for headlines. This font has several variants, such as regular, bold, and italic. You can choose which variants you want to use by removing the ones you don’t need. This can help improve your site’s loading times.
   • Next, add a second font for your body text. Let’s use Roboto. Again, select the variants you’ll use and remove the others.
3. Set Up Typography Styles: Now that your fonts are added, it’s time to apply them to different elements on your site.
   • Click Add Typography and select the element you want to style (e.g., H1, body text).
   • For H1 headings, select Red Hat Display as the font family, choose the font weight (e.g., 600), and adjust the font size and line height as needed.
   • For body text, choose Roboto, set the font weight to normal, and adjust the font size (e.g., 16px) and line height (e.g., 1.5).
4. Publish Your Changes: After setting up your typography, click Publish. Your site will now reflect the new fonts and styles across all pages.

Scenario 2: Adjusting Existing Typography in GeneratePress

If you already have some fonts set up in GeneratePress and want to make changes, follow these steps:

1. Access the Customizer: Go to Appearance > Customize and select Typography.
2. Modify Your Fonts: In the typography panel, you’ll see the fonts currently in use. Let’s say you want to change your headline font from Red Hat Display to Inter.
   • Simply select the H1 typography settings and change the font family to Inter. You’ll see the change reflected instantly.
   • You can also modify the body font. For example, switch from Open Sans to Times New Roman for a more traditional serif look.
3. Publish Your Changes: Once you’ve made your updates, click Publish. Your site will now display the new fonts.

Best Practices for Typography in GeneratePress

• Use Google Fonts API: When selecting fonts, using the Google Fonts API with the swap option is recommended. This improves performance by ensuring text remains visible during loading.
• Limit Variants: Only include the font variants you need to minimize loading times.
• Consistency is Key: Ensure that your typography choices are consistent across your site for a cohesive look.

Conclusion

Updating your typography and fonts in GeneratePress is a straightforward process that can greatly enhance the design and readability of your site. Whether you’re starting from scratch or tweaking existing settings, GeneratePress offers a flexible and intuitive way to manage fonts sitewide.

With these steps, you can ensure that your site’s typography is consistent, professional, and tailored to your design preferences.