How to Integrate Adobe Fonts (TypeKit) with Elementor Pro

Elementor Pro, the premium version of Elementor, includes an integration for Adobe TypeKit natively within the theme itself for use on the design. This opens the door for more choices in the font department for designers without having to upload fonts as webfonts. This allows for a more streamlined code structure and one that is more efficient for implementation.

Adobe TypeKit Integration with Elementor

Step One: Login to Admin Dashboard

In order to get this tutorial to work simply login to the backend of the Elementor built site.

Step Two: Navigate to Elementor Settings

Next, on the left hand side of the admin dashboard select Elementor > Settings and wait for the options to load.

Step Three: Select Integrations

A plethora of options should now be available, however the only one of concern is Integrations. Select this option on the left hand side and navigate to Adobe Fonts as the set of options displayed.

Step Four: Login to Adobe

Open a new tab and login to the Adobe Creative Cloud account that needs to be integrated with this website.

Step Five: Create a Project

Once logged in, select the fonts and add them to a web project. If help is needed check out our article on this here. Save the project and then copy the provided Project ID code into the computer’s clipboard.

Step Six: Integrate the Project ID with Elementor

Now that the Project ID code is copied into the clipboard, return to the Elementor tab and paste in the code in the denoted section and select save.

Conclusion

Native integration within Elementor Pro of Adobe TypeKit opens the door to more fonts than ever before. Current implementation is definitely more user-friendly than that of uploading fonts directly onto the server, etc. Adobe Fonts currently carries over 2571 font families to choose from. Just because the options are there though doesn’t mean that designers should go crazy with selecting multiple fonts. Keep things clean and minimal, general recommendation is up to four fonts maximum. Integrations in Elementor Pro are useful and include MailChimp and reCAPTCHA.

Let’s Work Together

Every project starts with an idea, and I want to help your idea come to fruition

2022-08-09T21:12:43-04:00
Go to Top