Choosing the right fonts for your website can be a daunting task. Fonts can make or break a user’s experience, so it is important to choose wisely. Adobe Typekit fonts are a great option for a professional aesthetic and maximum compatibility. If you are using WordPress, you may wonder how to connect Adobe fonts directly to your website. Fortunately, it is not as challenging as it may seem.
With the Nexter Extension (free) plugin, you can connect your Adobe Typekit project with your WordPress website and use Adobe Typekit fonts in WordPress without extra configuration.
Best Used For:
- Websites requiring premium Adobe Typekit typefaces that are not available in Google Fonts
- Brand-consistent projects where the same fonts are already part of an active Adobe Creative Cloud subscription
- Agency or client sites that need commercial-grade typography without separate font licensing
Note: Adobe fonts and Typekit are same.
How to add Adobe Fonts with the Nexter Extension?
First, you need your Adobe Typekit project ID. The process is described in the How to get Adobe Fonts Project ID section below.
Once you have your project ID, go to your WordPress dashboard and navigate to Nexter > Extensions > Utilities.
Go to the Adobe Fonts section, enable the toggle, and click the gear icon (⚙).
This opens the Adobe Fonts popup. Enter your Project ID and click Save.
The popup now displays all the fonts in your Adobe project.
The Adobe Fonts you added are available in the Nexter theme customizer settings under typography options. If you are using Elementor, the fonts will also appear in the Elementor typography section.
Once your Adobe Fonts are loaded, you can use them across all typography settings in Nexter Blocks. To apply custom font styles to headings, see How to Add an Advanced Heading in WordPress. For uploading your own typefaces instead, see Update Custom Fonts Ability: Manage Custom Font Settings in WordPress.
Is Adobe Fonts Service Free to Use in WordPress website?
To use Adobe Fonts on your WordPress website, you need an active paid Adobe Creative Cloud subscription. With your subscription, the fonts themselves are free to use on any website project.
How to get Adobe Fonts Project ID?
To get your Adobe Fonts project ID, follow these steps:
1. Click on this link and login to your Adobe account.
2. Once you are logged in, click on Web Projects.
3. On the next screen if you have created a project you will get your project id, but if you have not created a project, you will see a Learn More button click on it.
4. You will see a list of fonts, choose the font you want to add to your project and click on View Family button.
5. You will see a preview of the font and to add the font to your project click on the Add to Web Project button.
6. It will open a popup where you can enter a project name.
7. Now to get the project id click on Manage fonts > Web Projects you will get your project id.
