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.