May 25, 2023

Replace Google Fonts with Custom Fonts on your Elementor Website

Play Video

What is the tutorial about?

See how you replace Google Fonts with Custom Fonts on your Elementor Website brought to you by Web Squadron. It is a must-watch for anyone looking to enhance their website’s aesthetics and performance. If you want to learn more about how to reduce the size of your fonts even further check out this tutorial.

Tutorial Steps

  1. Identify the Current Font:
    Start by identifying the fonts used on your website. In this tutorial, the ‘Railway’ font was used as an example.
  2. Access the Custom Fonts Option:
    If you have Elementor Pro, you’ll find the custom fonts option in your WordPress dashboard.
  3. Add Your Font:
    Click on ‘Add New’ and input the name of your font (in this case, ‘Railway’). Click on ‘Add Font Variation’.
  4. Upload the Font:
    Upload the font file. The tutorial recommends using the WOFF2 format as it is compressed and will help improve your website’s speed.
  5. Publish the Font:
    Once you’ve uploaded the font, click on ‘Publish’.
  6. Refresh Your Page:
    Go back to your website and refresh the page. Your new custom font should now be in use.
  7. Check Your Work:
    To confirm that your custom font is being used, go to the ‘Style’ section and check the ‘Typography’ settings.

Use Cases for this Tutorial

  • Website Redesign:
    If you’re looking to give your website a fresh look, changing the font can make a significant difference.
  • Speed Optimization:
    Using custom fonts, especially in the WOFF2 format, can improve your website’s loading speed.
  • GDPR Compliance:
    If you’re concerned about GDPR, using custom fonts can help you avoid fetching data from Google Fonts.

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Replace Google Fonts with Custom Fonts on your Elementor Website
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.