Typekit integration error - Access-Control-Allow-Origin (CORS)

Hello,

I’ve tried enabling typekit fonts on my website, but I keep getting the following error on my Chrome inspector console:

Access to Font at ‘http://fonts.gstatic.com/s/firasans/v8/va9B4kDNxMZdWfMOD5VnPKreRhf6.woff2’ from origin ‘http://ss.foliosofy.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://ss.foliosofy.com’ is therefore not allowed access.

These are the steps I’ve tried:

  1. Activated the typekit plugin
  2. Created a kit on adobe typekit and added my website to the allowed urls on the kit settings
  3. Went to the plugin page, pasted my typekit id, refreshed fonts and updated.
  4. Went to the X Theme font manager and created font groups. My typekit fonts display fine.
  5. Opened the wp customizer -> typography, enabled the font manager and set the fonts for body and headings.

At step 5, none of my fonts display and I get the error I quoted above. Error is still there after I save the page, refresh and go to any page on the site.

I also opened my .htaccess file in my public_html folder, which is the root for my site, and added the following lines on top:

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Source: https://crunchify.com/how-to-fix-access-control-allow-origin-issue-for-your-https-enabled-wordpress-site-and-maxcdn/

Could you please help me fixing this?

Thanks a lot

Hi There @shadingspecialists

Thanks for writing in! Could you please try adding the following code instead and see if that helps.

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

After adding the code to your .htaccess file, it should look like.

For detailed information, please follow (https://theme.co/apex/forum/t/troubleshooting-font-awesome/200).

Let us know how it goes.
Thanks!

1 Like

Thank you so much for your fast response. It is very important for us.

I’ve added the lines you specified, which results in my .htaccess file looking like this:

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

AddType application/x-httpd-php70 .php
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^/[0-9]+\..+\.cpaneldcv$
RewriteCond %{REQUEST_URI} !^/\.well-known/pki-validation/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^/[0-9]+\..+\.cpaneldcv$
RewriteCond %{REQUEST_URI} !^/\.well-known/pki-validation/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteRule . /index.php [L]
</IfModule>

# END WordPress
RewriteCond %{HTTP_HOST} ^foliosofy\.com$ [OR]
RewriteCond %{HTTP_HOST} ^www\.foliosofy\.com$
RewriteCond %{REQUEST_URI} !^/[0-9]+\..+\.cpaneldcv$
RewriteCond %{REQUEST_URI} !^/\.well-known/pki-validation/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteRule ^ref\/?$ "http\:\/\/2573c1k2lzlrcz0lm7odg\-yfcw\.hop\.clickbank\.net\/" [R=301,L]

I did verify that I’m running Apache 2.2.31.

Still have the same problem :frowning:.

Kind regards

Hey Pierre,

The Typekit extension is not needed in X and Pro anymore because the integration is built-in now. There are instances the extension causes issues.

To integrate Typekit in the theme, go anywhere in the theme’s interface and click the gear icon.

Next, go to Fonts and scroll way down and you’ll see where to setup Typekit.

Regarding the CORs issue, it looks like it’s not related to Typekit. You posted the generated error message and it’s for Google Fonts.

Also, it is your web host that can best help you regarding CORs as they have control over the server. For more details, please see https://enable-cors.org/

If the issue persists, try disabling the Font Manager, wait for the preview to load then enable it again.

Lastly, update to the latest version as there are numerous fixes like

BUGFIX: Fix TypeKit ID not loading from previously saved settings.

Follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.

Thanks.

1 Like

Hello,

It’s finally working!
I removed the Typekit extension and enabled it on the X theme options, as indicated on your images.
It just took a while to refresh.

Thanks a lot for your help!

Great! You’re most welcome. Glad to hear you got that working.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.