How To Add Adobe Fonts (TypeKit)
As of OceanWP version 3.4.0 and Ocean Extra version 2.1.0, you are able to add Adobe Fonts (TypeKit) to your OceanWP theme for free.
Once you've connected your Adobe Fonts project with your OceanWP theme, you will be able to use your selected fonts within the Customizer and Elementor.
In this article we'll walk you through all the steps of adding Adobe Fonts to your OceanWP theme.
1 Create a Project in Adobe Fonts
2 Add Fonts to Your Adobe Project
Once you've created a project in Adobe, you can add your fonts of choice to it using the "< / >" button.
3 Preview Your Project Fonts
In Adobe, you can preview your Project and all the fonts you've added to it on a dedicated page. You need to be signed in to Adobe to preview the page.
4 Copy Adobe Project ID
Find your Project ID and copy it.
5 Add Project ID to OceanWP
Navigate to OceanWP > OceanWP Panel > Integrations, and in the Adobe Fonts (TypeKit) section paste your Project ID in the correct field.
Remember to enable the Adobe Fonts (TypeKit) module first if you're not seeing the option to add your Project ID.
6 Enable Adobe Fonts for OceanWP Customizer
If you wish to use your Adobe Fonts within your OceanWP theme and its related plugins (including third-party plugins that have the option to inherit theme fonts), once your Project ID has been validated, make sure to set the Enable for Customizer option to "Enable"., then Save Changes.
After that, navigate to Customizer > Typography, and select any of the fonts you've added.
7 Enable Adobe Fonts for Elementor
With your OceanWP Adobe Fonts integration, you're also able to use your fonts choice with Elementor as well.
Navigate to OceanWP > OceanWP Panel > Integrations, then scroll down to the Adobe Fonts (TypeKit) section, and set the Enable for Elementor option to "Enable". Save Changes.
After that, open your Elementor projects and within respective widget typography settings choose your font.
Enjoy building with OceanWP