Now It’s Easier Than Ever to Use Custom Fonts With Astra!

Have you ever tried adding custom fonts on a website? Isn’t that little too complex? Well, we have a good news for you. We just released a free plugin for Astra that makes it easy to use custom fonts. Here is it works:

Step 1: Install the Custom Fonts Plugin from WordPress Repository.

Step 2: Upload your font file.

Screen Shot

We’ve provided support for the following font formats.

  • woff2
  • woff
  • ttf
  • svg
  • eot

We recommend you upload the font in as many formats as possible so the fonts would appear in all browsers and look sharp. To see browser support for different fonts, please visit this page.

Step 3: Done!

Once you add the font, go to the customizer where you should be able to see the font that just you added. Just select it for the element you want to apply that font for and you should be done.

Screen Shot

No code necessary! We plan to add support other third party plugins like Beaver Builder & Elementor shortly. We also plan to provide an API shortly for any other plugins or themes that might want to add support for this plugin.

Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!

29 comments
  1. Stragulpete Profile Pic

    WordPress does not allow uploading .woff .woff2 .ttf .eot .svg files out of the box, so how should these be uploaded using the media manager?

    1. Team Astra Profile Pic

      When uploading the custom fonts in the custom fonts plugin we enable these font uploads using WordPress’s fonts.

  2. sbonaime Profile Pic

    Like STRAGULPETE wote, WordPress 4.9.1 does not allow uploading .woff .woff2 .ttf .eot .svg. I tried to add the ttf Mime to wordpress without success 🙁

  3. Shane Rielly Profile Pic

    I just uploaded and added custom fonts using Elementor, but they don’t show up in the Customiser. Any chance you will begin supporting that since Astra integrates so well with Elementor already?

    It would be nice not to have to add the custom fonts twice with two different systems.

      1. Genevieve Profile Pic

        I second that, it would be a great feature to allow Elementor’s custom fonts functionality to work for the customizer in Astra Pro’s theme especially since then you don’t need to have an extra plugin that does the same thing.

  4. Oliver Zeiger Profile Pic

    Hi,

    is it possible to add different styles with the Custom Fonts plug in as I can do it with the elementor user-defined fonts?

    1. Team Astra Profile Pic

      Right now you can add font variants as a different font.
      We will be adding an inbuilt option to add font variations in an plugin update.

    1. Team Astra Profile Pic

      Right now you will have to add font-weight variants as separate fonts and then you can use them in the plugin. We have it in our plans to adding font-weights support to the plugin.

    1. Team Astra Profile Pic

      The plugin cannot detect other fonts being loaded automatically. You will have to manually move the custom fonts from custom code to this plugin.

  5. Jerud Profile Pic

    Easy as pie with Gutenberg! Too bad I killed 3 hours trying to figure out how to do it manually before realizing it was baked right in to Astra. My bad…but gold star for Astra theme!

    To get all the necessary font files for quick-n-easy upload, search for “google webfonts helper”. Makes the whole process a 5-minute affair.

    If you’ve already set the google webfonts in your Typography settings, remember to go back and change to your new locally-hosted versions!

  6. Dan Profile Pic

    Hi,

    If we just want to upload a font to be used in only certain text, how would we do that? Upload the font and choose “Optional”, right? Then what is the Custom CSS that we need to put in to use that Optional font?

    Thanks,
    Dan

    1. Team Astra Profile Pic

      Hello Dan,

      As we mentioned above in our post “No code necessary!” so you won’t need to add any custom CSS on your end to use this font further.

      Just upload your font files as steps provided which will display that font option in the dropdown of Customizer Font settings (as per the above second screenshot).

      Let’s say you want to apply this custom font to all H1 tags on your site, then just navigate to Customizer > Global > Typography > Headings > H1 – here in the font family dropdown you just need to select your custom font name.

      That’s it! This font will be now applicable to all your H1 headings on your site.

      If you still have any concerns, do reach out to us through our Support Portal.

  7. Elena Profile Pic

    Hello!
    When I use Astra, I have the error from Page Speed Insights:
    Ensure text remains visible during webfont load
    Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.
    star.woff
    How to prevent from loading this font?
    I just do not want to exists on the website.
    Thank you!

Leave a Comment

Your email address will not be published. Required fields are marked *

Astra is Free. Now & Forever.

We believe creating beautiful websites should not be expensive. That's why Astra is free for everyone. Get started for free and extend with affordable packages.

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top