Elevate Your Design: Integrating Custom Fonts in Astra & Elementor (No Pro Needed!)

Preface

Tired of the same old fonts in your Astra and Elementor designs? Want to add a unique touch to your website without breaking the bank? You’re in the right place! This guide will walk you through integrating custom fonts into your WordPress website using the free versions of the Astra theme and Elementor page builder. No need to shell out for the Pro versions—we’ll show you how to achieve professional-looking typography without spending a dime. Let’s get started!

Why Use Custom Fonts?

Before diving in, let’s understand why custom fonts are important. Typography plays a crucial role in website design. It influences readability, brand identity, and overall user experience. By using custom fonts, you can:

• Enhance Brand Identity: Choose fonts that align with your brand’s personality and create a consistent look and feel.
• Improve Readability: Select fonts that are easy on the eyes and optimize the reading experience for your visitors. You want your visitors to spend more time on your website to boost your SEO. Want even more SEO? Then check out How to Optimize Your Website for SEO: A Quickstart Guide for WordPress
• Stand Out from the Crowd: Differentiate your website from the competition with unique and memorable typography.

Hint: Consider the legibility and readability of your chosen fonts. A stylish font is useless if your visitors struggle to read your content.

Finding Custom Fonts

The first step is to find the perfect custom fonts for your website. Here are some great resources:

• Google Fonts: A vast library of free, open-source fonts that are easy to use. Visit Google Fonts to explore the collection. Also check out our Blogpost about Top 10 Free & Best Google Fonts for Your Website
• Font Squirrel: Another excellent resource for free fonts, with a focus on commercial-use licenses. Check it out at Font Squirrel.
• Adobe Fonts: If you have an Adobe Creative Cloud subscription, you have access to a wide range of high-quality fonts.
• Creative Market & ThemeForest: These marketplaces offer premium fonts for a fee. Find thousands of fonts on Themeforest.

Info: When choosing a font, make sure it supports the languages and characters you need for your website’s content.

Method 1: Using the ‘Custom Fonts’ Plugin

One of the easiest ways to integrate custom fonts into Astra and Elementor is by using a plugin. The ‘Custom Fonts’ plugin is a popular and reliable option.

Step 1: Install and Activate the Plugin

First, you need to install and activate the ‘Custom Fonts’ plugin:

1. Go to your WordPress dashboard.
2. Navigate to Plugins > Add New.
3. Search for ‘Custom Fonts’.
4. Install and activate the plugin by Brainstorm Force (the makers of Astra).

If you need clarification on how to install a plugin, please see this article on how to install WordPress plugins

Step 2: Add Your Custom Fonts

Once the plugin is activated, you can add your custom fonts:

1. In your WordPress dashboard, go to Appearance > Custom Fonts.
2. Click the Add New button.
3. Give your font a name.
4. Upload your font files (TTF, WOFF, WOFF2, etc.).

   Info: Make sure you have the appropriate font files for different browsers and devices. WOFF and WOFF2 are recommended for web use.
   

5. Click Publish.

Step 3: Use Your Custom Fonts in Astra and Elementor

Now that you’ve added your custom fonts, you can use them in Astra and Elementor:

• Astra: Go to Appearance > Customize > Global > Typography. You should see your custom fonts in the font selection dropdown.
• Elementor: Open the Elementor editor and select any text element. In the Style tab, you’ll find your custom fonts in the font family dropdown.

Hint: If you don’t see your custom font right away, try clearing your website’s cache and your browser’s cache.

Method 2: Adding Custom Fonts via CSS

For a more code-based approach, you can add custom fonts using CSS. This method gives you more control over how your fonts are implemented.

Step 1: Upload Your Font Files

First, you need to upload your font files to your website. You can use the WordPress media library or upload them directly to your theme’s folder.

Info: It’s recommended to create a ‘fonts’ folder in your theme’s directory to keep your files organized.

Step 2: Add the @font-face Rule to Your CSS

Next, you need to add the `@font-face` rule to your website’s CSS. You can do this in the **Appearance** > **Customize** > **Additional CSS** section of your WordPress dashboard, or directly into your `style.css` file. To understand where this file resides, please see this article: WordPress Style.css: What It Is and Where to Find It Make sure to adjust the paths so that they are correct! Here’s an example:

@font-face {
 font-family: 'MyCustomFont';
 src: url('https://www.yourwebsite.com/wp-content/themes/your-theme/fonts/MyCustomFont.woff2') format('woff2'),
 url('https://www.yourwebsite.com/wp-content/themes/your-theme/fonts/MyCustomFont.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}

Replace `’MyCustomFont’` with the name of your font, and update the `url()` paths to point to your font files.

Step 3: Use Your Custom Fonts in Astra and Elementor

Now you can use your custom fonts in Astra and Elementor by referencing the font family name in your CSS.

• Astra: Go to Appearance > Customize > Global > Typography and add custom CSS to use your font.
• Elementor: Open the Elementor editor and select any text element. In the Advanced tab, add custom CSS to use your font.

  Here’s an example CSS snippet:

  body {
   font-family: 'MyCustomFont', sans-serif;
  }
  

Replace `’MyCustomFont’` with the name of your font.

Hint: You can use the `!important` declaration to override any existing styles that might be preventing your custom font from being applied.

Troubleshooting Common Issues

Sometimes, you might encounter issues when integrating custom fonts. Here are some common problems and their solutions:

• Font Not Displaying:
  • Make sure your font files are uploaded correctly and the paths in your CSS are accurate.
  • Clear your website’s cache and your browser’s cache. Then make sure you reload your website so every cache is cleared!
  • Check for any CSS conflicts that might be overriding your font styles.
• Font Rendering Incorrectly:
  • Ensure you have the correct font files for different browsers and devices (WOFF, WOFF2 are recommended).
  • Check the font’s license to make sure you’re using it correctly.
• Font Loading Slowly:
  • Optimize your font files by compressing them.
  • Use font-display: swap; in your CSS to prevent the text from being invisible while the font is loading.

Choosing the Right Fonts For Your Website

Choosing the correct font for your website can be hard. Therefore check out this article about it: How to Choose the Right Fonts for Your Website

Conclusion

Integrating custom fonts into Astra and Elementor doesn’t have to be complicated or expensive. By using the ‘Custom Fonts’ plugin or adding fonts via CSS, you can easily enhance your website’s typography and create a unique brand identity. Experiment with different fonts and find the perfect combination that reflects your brand’s personality and provides a great user experience. With these methods, you can elevate your website’s design without needing the Pro versions of Astra or Elementor. Happy designing!