How to Use Adobe Fonts in Elementor

Updated: May 25, 2021

Using the pro version of Elementor allows you to integrate your Elementor with a wide range of services and tools. Adobe Fonts (formerly TypeKit) is one of which. Adobe Fonts, as you already know, is one of the best resources for fonts, other than Google Fonts. Integrating Adobe Fonts with Elementor will enrich the fonts library on your Elementor.

To use fonts from Adobe Fonts you need to have at least one web project on your Adobe Fonts account. You can then use the ID of your web project to integrate Adobe Fonts with your Elementor.

How to create a web project in Adobe Fonts

If you have no web project yet, you can create one first. To do so, visit the Adobe Fonts website and login with your Adobe account. Once logged in, click Browse Fonts on the top-left corner to browse a font family.

Find a font family you like and click the View Family button to view the details.

Click Add to Web Project on the right side.

On the appearing popup, select a project from the dropdown menu. If you don’t have one yet, simply create a new project by clicking Create a new project.

Give your project a name and click the Create button.

Once your new project is crated, click My Adobe Fonts on the upper-right corner.

Click the Web Projects tab. Select one of the existing projects you want to integrate with Elementor and select its project ID.

To add font families to your project, you can click Browse Fonts on the top-left corner. Select a font family you like and click the View Family button to view the details. Click the Add to Web Project on the right side and select a web project you want to add the font family to from the dropdown menu.

Integrating Adobe Fonts with Elementor

Login to your WordPress dashboard and go to Elementor -> Settings to open the Elementor settings page. Once you are, click the Integration tab. Scroll down to the Adobe Fonts (TypeKit) section and paste the project ID you have just copied. Click the Get Project ID button. Don’t forget to click the Save Changes button on the bottom to apply the changes.

Please note that the synchronization process may take a few minutes. If you can’t wait, you can click the Sync Project button every time you are done adding a new font family to your project in Adobe Fonts.

If everything went well, you could now use a font from Adobe Fonts on your Elementor page or template. To test the result, try to edit the typography of a widget and change the font family. Elementor displays fonts from Adobe Fonts right below the custom fonts section.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

1 thought on “How to Use Adobe Fonts in Elementor”

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating on WordPress with Elementor.


How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.