Add Custom Fonts to WordPress Using Elementor

Upload fonts to WordPress and add your self-hosted & Typekit fonts with Elementor Pro.

In Elementor, we’ve always placed top priority on providing you with the most extensive typography flexibility, since typography plays such a key role in web design. 

Since day one, we offered visual control over typography settings such as font weight, line height, letter spacing and text decoration (recently added for version 1.9). Elementor also comes pre-built with 800+ different Google fonts to choose from. 

Sometimes, however, default Google fonts are simply not enough.

Many web designers want to be able to create that extra branded and professional style, achieved only with custom fonts.

Now, we bring you a new easy way to upload your own custom fonts.

Simply upload your custom font formats, and see them instantly appear inside the widget typography settings. We’ve also added a seamless integration to Typekit fonts, letting you sync and use all your Typekit fonts with a simple click. 

#Elementor's New WordPress Custom Font Feature is FONT-ASTIC

In order to get visitors to see custom fonts in your site, the fonts must be uploaded to your site as standard file formats. There are several such font formats, each offering support for different browsers.

In Elementor, we’ve made it easy to upload your custom web font formats:

  • Head over to the WordPress Dashboard > Elementor > Custom Fonts, and click ‘Add new’.
  • Now, add any font by uploading its WOFF, WOFF2, TTF, SVG or EOT File. It is recommended that you upload as many font files as possible, in order to provide support for the maximum number of browsers.
  • Once uploaded, your new custom fonts will be available in the typography controls of every widget that contains text.

Bring Your Fonts into WordPress Using Elementor

The font formats include:

  • The Web Open Font Format (WOFF) – WOFF is the most recommended format to use, since it is supported by all modern browsers
  • The Web Open Font Format (WOFF 2.0) – TrueType/OpenType font that provides better compression than WOFF 1.0
  • TrueType Fonts (TTF) – This font was developed in the late 1980s, by Apple and Microsoft
  • SVG Fonts/Shapes – SVG fonts allow SVG to be used as glyphs when displaying text. Make sure to use this format to support old versions of iPhone
  • Embedded OpenType Fonts (EOT) – This font file works on IE, but not on other browsers. Make sure to use this format to support earlier versions of IE
Learn more about font types on W3Schools

Font Weights and Styles

Custom fonts are grouped into families. Each font family includes its own set of weights and styles, uploaded separately.

A font family could include of a set of weights, spanning between 100-900, as well as Normal, Bold, Bolder or Lighter weights. It can also include Normal, Oblique or Italic fonts. Any variation of weight & style can be added separately to the font family group.

Once you upload your font variations, you’ll be able to choose the font inside Elementor and adjust its weight and style accordingly.

Note: If you don’t upload a certain weight, it will not be available in the editor. Instead, supporting browsers will fallback to the closest available weight.

Play Video

Adobe Typekit Now Available in Elementor

Adobe Typekit is a subscription service for fonts which you can sync to your computer or use on a website. With Typekit, you can download any of the thousands of fonts available, and use them on your site. 

Adobe offers 2 Typekit fonts for free, so you can try it out first and see how you like it.

The biggest advantage of using Typekit on web design projects is its seamless integration. Designers, who already use Photoshop, get instant access to thousands of professional fonts from within their interface, all synced and easily handy. They don’t need to deal with font downloads or confusing setup.

Typekit works seamlessly with Elementor. You simply enter your Typekit key in the settings dashboard (Integrations tab), and instantly get all your Typekit fonts inside the various typography settings in Elementor. Using this integration, you don’t need to download, install or code anything to use your Typekit fonts.

Moving from Photoshop PSD to a finished live WordPress design has never been simpler, using this Typekit integration.

Under Elementor > Settings > Integrations you can add your Typekit Kit ID. Once you add it, click on ‘Sync Kit’. Wait a few minutes, and you should see all your Typekit fonts in Elementor. After adding new fonts to your Typekit account, don’t forget to go back to the integrations page and sync your fonts again.

Note: It may take a few minutes for Adobe to update their CDN network and get your fonts into Elementor, so please be patient after adding your key.

custom font family

Custom Fonts Inside Elementor Editor

After you add your custom fonts, head over to Elementor and start using the new fonts in your pages. 

Add a heading, or any other text widget, and under Style > Typography choose your custom font or your Typekit font. 

The new custom fonts and Typekit fonts should appear above the Google fonts. Start designing and creating amazing websites!

Elementor Page Builder for WordPress

Want to Create More Unique Websites?

Use Custom Fonts to build top-notch websites that clients desire. Upgrade to Pro and start building beautiful branded websites today.

Special Offer for Elementor Users

Want to get some shiny new fonts and test them out in Elementor? To help you out, we’ve teamed up with Creative Market, with a special 15% Off discount on all fonts.

Custom Fonts include several major benefits for web designers:

  • Keep your client’s brand identity and unique brand language.
  • Create a unique website, one that uses more imaginative fonts than the worn out Roboto.
  • Use special custom-made fonts to create top-notch & cutting-edge designed websites.
  • Accept projects that include a client requirement to use custom brand fonts

Get inspired by the custom fonts in this post, and start using custom fonts on your own WordPress website projects. 

Created a smashing page with custom fonts? You’re invited to send them over in the comments below!

About the Author

Ben Pines
Ben Pines
Elementor evangelist & head of content. Follow me on Twitter

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Liked This Article?

We have a lot more where that came from! Join 1,353,229 subscribers who stay ahead of the pack.

By entering your email, you agree to our Terms of Service and Privacy Policy.


102 Responses

    1. If you don’t use custom fonts obviously it doesn’t affect loading. If you do use them then the effect is like any other loaded asset, like loading images (only much smaller in size).

  1. Yay!!! \o/ That’s awesome, and the ability to use Tk is incredible, a game changer. Thank you guys!

    Speaking of awesome, now that you have this in place, how about giving some love to custom icons in the same manner? =D

    No pressure Ben, lol

    Keep up with the good work, cheers!

  2. So, if we’ve already been using a plugin to do this (in my case, “Typekit Fonts for WordPress”), is there a performance-based reason to switch? Also, has your beta testing found any glitches when users switched from separate plugins to Elementor-with-Typekit?

    Don’t misunderstand: I’m happy to do ever more things entirely within Elementor but, since this would be pretty noticeable item if it were to break, I just want to understand the ramifications of going from using Typekit through a separate plugin to using it through Elementor. TIA for whatever such info you can share.

    1. There is a performance based reason. One less plugin means less bloat. We’ve done plenty of testing by our team of developers. Our support is here to help if you happen to meet any issue.

      1. Thanks. Just one best-practices question: do you recommend adding the Typekit license in Elementor **before** disabling the other plugin, or can they both have it briefly, so as to give it a few minutes for the Adobe CDN to do its stuff?

      2. Also: if we’re using a theme which depends on the presence of the Typekit fonts, will accessing Typekit via only Elementor (and not a separate plugin) work the same?

        1. Answering my own question here re theme — as I feared, this won’t address that. Turning off my current Typekit plugin, of course, also turns off the font access for the theme. Perhaps down the line Elementor’s integrations will “talk to” themes, too, but I guess we’re not there yet.

  3. That’s handy. Another helpful tool from a branding point of view would be to add preset swatches from the brand to the colour pickers as a default palate, so we’re not forever pasting in hex codes.

    If there’s already a way of doing that, I’d love to learn how!

  4. Great addition, always good to get rid of google stuff!

    Help needed: Trying to upload a woff2 file fails: ‘Sorry, this file type is not permitted for security reasons.’

  5. As always, your latest update is GRATE news! I only have a question: How we can export our custom fonts (not from TypeKit) in order to transfer them to an other site with elementor Pro installed. Is it possible?

  6. You are always adding great new features to Elementor but you do not always make it clear if the new features are available in Elementor (free), Elementor Pro or both. It would be helpful if you clearly specified this.

  7. any timeline on theme and features? i know this isnt the forum for that but sure would be nice to have some customization options on template pages. using generatepress is awesome but would like to incorporate my own nav menus, template page designs for single and archive and single product pages. more customization of products in shop page, etc.

  8. This is fantastic news!!!

    This feature has been at the top of my wishlist since the beginning–and I’m with everyone else who wants custom icons to be next 🙂

    For me, greater control over typography (and especially custom fonts) is one of the most important aspects of pleasing and professional web design. I haven’t launched my site yet but I’m currently using the Use Any Fonts plugin to experiment with different fonts. It requires changing title tags to ‘paragraph,’ which is creating a mess.

    I would like to disable the plugin (which I would like to point out has been great in a test environment where I’ve tested dozens of font combinations). Another commenter asked about switching from using a Typekit plugin to relying solely on the new Elementor feature. I was wondering if there is a way to see custom fonts uploaded through Elementor in the theme’s typography drop-down menu?

    Otherwise, I am guessing I would still need to use two plugins (one that will effect the theme’s general settings and one that will display with Elementor)…?

    Thank you!

  9. Does this mean that we can now self host these fonts and remove the call to Google fonts altogether? That’s how I understand it anyway.

      1. It would be nice if the tutorial and/or videos made mention of the fact that uploading custom fonts is a pro feature only. Just spent all this time watching the videos, getting excited about this feature and then having to scroll through most of the comments to learn that it is only a pro feature. Very frustrating.


    I was having a hard time finding some of the font formats I wanted when I stumbled on a site which will ~ with one click ~ take whatever font format you have already and convert it to all the formats you don’t have.

    So for anyone who’s interested, take your .ttf file (for example) here, and they will give you back .eot, .otf, .svg, .woff, and .woff2 formats –> [Online Font Converter](

    Hope you find it useful.

  11. Is there a way to see a sample of all the fonts available to help in picking out the font?

    I know I used to print out a wall chart with all the fonts I had so clients could look for the ones they liked making it easier to select.

  12. Good afternoon,

    When I create the custom font and hit publish, rather than publishing it under custom fonts it creates it as a Post despite me adding it under Elementor > Custom Fonts

    Any suggestions what I might be doing wrong?

    I have activated Pro version too

  13. I am looking forward to a time when I can use my own custom images instead of custom fonts. For some reason, using this feature breaks my ability to use an .SVG background. I tried to use this method but it didn’t work and I couldn’t go back and I had to re-develop the site from scratch.

  14. “Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
    1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
    2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
    Finally, would you spare a few seconds to check this site and offer me your candid advice

  15. “Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
    1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
    2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
    Finally, would you spare a few seconds to check this site and offer me your candid advice

    1. 1. The fewer plugins you use, the better, but we have no rules limiting the number of installed plugins.
      2. Did you try the custom fonts included in Elementor Pro?

  16. Handy tool, but shortly after adding font it becomes unavailable on cross browsing, any suggestions? Had a
    eureka moment when it was there on mobile view then poof gone, still shows on safari, is it possible the media manager is altering the file size location etc help me Obi Wan……

  17. I am having an Issue on the editor side of Elementor. It seems that some of the custom fonts I have added don’t load properly and instead the text displays the global font. When I preview the site or go into the URL of the site it shows properly so it is truly confusing me. I would appreciate any help I could get thanks!

  18. The body font won’t change at fact, it won’t load anything at all and i get OS default. It’s that bad. And nothing I do in elementor can fix it.

    Even when I clear cache and view on other browsers it won’t load up any custom font let alone google fonts.

    I checked the CSS and it seems to be overriding both custom and global, like it won’t load any body font.

    Frustrating to say the least.

  19. I uploaded the fonts but they don´t show on all other devices.
    Do i need to have the file located on a server? or do i upload it from my computer and elementor places the file on my server?

  20. Any guidelines for activating subset for google font? Even Elementor PRO dont have option that in google font that we are using, we can activate font subset (ex. lating-extended or cyrillic). Please, i think this can be simply upgrade but very very valuable one.

Leave a Reply

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

Want to learn how to build better websites?

Join 1,353,229 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.