Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
1

Typekit Font on Wordpress via Divi not working

New Here ,
Aug 03, 2021 Aug 03, 2021

I'm trying to connect a Typekit web project to my Wordpress site using a plugin. The code has already been inserted, but unfortunately the fonts are not displayed in the Divi Builder. Unfortunately, Divi doesn't know how to help me, so I'm hoping for support here.
Thank you

TOPICS
How to , Missing font , Product issue , Sync issue
13.5K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 21, 2021 Sep 21, 2021

Hi there!

Probably the best way instead of a plugin is to create a child theme with the custom css for each font.

 

You'll first need to add the link tag that Adobe Fonts provides to embed on the page under Divi > Theme Options > Integration > Add the link of code to the Head section.

 

Then I like to use this link to generate a child theme .zip file: https://divi.space/divi-child-theme-builder/

In the "Custom CSS" section is where you will add the font qualities from your TypeKit web project (assigning to whichever section or property your want such as body, div, h1, etc). Save and the generator will email you a link to the child theme file

 

Next, download the zip and upload it to Appearance > Themes > Add New

 

WordPress will recognize it as a Child Theme and if Divi is installed, will assign it to Divi.

 

Refresh your page and the changes should be set!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 12, 2023 Mar 12, 2023

where do I find the link tag to do that?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 13, 2023 Mar 13, 2023
LATEST

Hello,

When you go to fonts.adobe.com, select the "Manage Fonts" link that appears under your log-in in the upper-right hand portion of the screen. From there, above the list of fonts that you have activated, select the category "Web Projects." All of your grouped web projects will appear and you can copy the respective link css tag to go in the "head" section of your website.

 

Note, you will need to add fonts to a web project as you activate them, which can be done within the font family page.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines