Search

How to Use Adobe Fonts in Elementor

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 our project. Read our affiliate disclosure.
Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

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

Leave a Comment

Haven’t used Elementor Pro yet?