Can you help me troubleshoot why the font from Adobe Typekit is not working on my Webflow site, even though it is still selected in the font drop down?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

If you are having issues with the Adobe Typekit font not working on your Webflow site, there could be a few potential reasons for this. Here are some troubleshooting steps to help you resolve the issue:

Clear Browser Cache: Sometimes, browser cache can prevent newly added or updated fonts from displaying correctly. Clearing your browser cache can help resolve this issue. To clear your cache, follow the instructions specific to your browser.
Verify Typekit Integration: Make sure that the Adobe Typekit integration is correctly set up on your Webflow project. This involves adding the Typekit embed code to your project settings. Double-check that the embed code is placed within the "Head Code" section of your project settings.
Check Font Licensing: Ensure that you have the appropriate licensing for the Adobe Typekit font you are using. Some fonts in Adobe Typekit may have restrictions on web usage, and you need to have the correct license to use them. If your license has expired or does not cover web usage, it may prevent the font from rendering correctly on your Webflow site.
Font Subsetting: Webflow offers the ability to subset fonts to reduce file sizes and improve page loading speed. However, subsetting fonts can sometimes cause issues with certain characters or languages. Try disabling font subsetting in your Webflow project settings to see if the font starts working properly.
Cross-Origin Resource Sharing (CORS) Issue: If you are using the Adobe Typekit font on a custom domain or a subdomain of your Webflow site, check if you have enabled CORS correctly. CORS headers need to be properly set up on the font server to allow the font to be accessed from your website. Reach out to both Adobe Typekit and Webflow support for assistance with configuring CORS settings.
Font Loading Method: Consider changing the font loading method in your Webflow project settings. Webflow offers different font loading options such as "Standard," "Faster," and "Optimized." Switching to a different font loading method may help resolve the font display issue.
Test on Different Browsers and Devices: Check if the font is not working only on a specific browser or device. In some cases, certain browsers or devices may have compatibility issues with certain fonts. Test your website on multiple browsers and devices to see if the issue persists across all platforms.

If none of these troubleshooting steps resolve the font issue, it may be helpful to reach out to the Webflow support team for further assistance. Provide them with specific details about the font you're using, steps you've taken to integrate it, and any error messages or warnings you've encountered. They should be able to provide you with more personalized guidance to resolve the issue.

Additional Questions:

How do I correctly integrate Adobe Typekit fonts into my Webflow site?
What should I do if my Adobe Typekit font is not displaying properly on mobile devices?
Are there any alternative font services I can use with Webflow instead of Adobe Typekit?

Can I insert a variable to replace "XYZ" in a text string, or do I need separate elements for each part of the sentence in Webflow?

Can you suggest an alternative method to add an "onload" attribute to the body in Webflow since it is not allowed to fill in?

How can I remove the leftover lines created when removing columns and rows in Webflow's CSS Grid?

Can Freezframe.js be used on Webflow to control animated gif files with actions?

Why won't the heading text wrap when it reaches the end of its container in my Webflow project?

Can the ability to drag images be disabled in Webflow?

What is a workaround for the issue of anchor links causing a skip when using Webflow's Navigation Element with a fixed position?

Where should the facebook conversion pixel code snippet be placed on the Webflow Website?

How can I fix the formatting issue when embedding a Google Docs into Webflow?

Is it possible to force any links or scripts that appear above a specific block of code to the bottom of the head in Webflow, possibly using javascript or jquery?