CORS issue when using Google Fonts

Author: brandonccCreated May 12, 2021Updated Mar 24, 2023

Here is my configuration:

xml

WebFont.load({
  active: function() {
    const event = document.createEvent('Event');
    event.initEvent('fonts-loaded', true, true);
    document.dispatchEvent(event);
  },

  typekit: {
    id: 'abc123'
  },

  google: {
    families: ['Assistant:400,600,700', 'Sorts Mill Goudy:300,700:ital']
  },

  custom: {
    families: ['Impact']
  }
});

Unfortunately, I have a CORS error from the Google Fonts:

Access to XMLHttpRequest at 'https://fonts.googleapis.com/css?family=Assistant:400,600,700%7CSorts+Mill+Goudy:300,700&subset=ital' (redirected from 'http://fonts.googleapis.com/css?family=Assistant:400,600,700%7CSorts+Mill+Goudy:300,700&subset=ital') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This has been an issue for a very long time, and I'm hoping there is a solution. I opened this SO question a year ago.

My current machine is Brave on MacOS Big Sur.

Source: typekit/webfontloader

View original on GitHub View discussion on GitHub