Home›Support›English Support›[Resolved] CORS Error with Google Fonts on WPML Multilingual Site with Different Domains
[Resolved] CORS Error with Google Fonts on WPML Multilingual Site with Different Domains
This thread is resolved. Here is a description of the problem and solution.
Problem: You are encountering CORS policy errors when Google Fonts are not loading correctly across different language domains set up in WPML. The Italian domain shows different fonts compared to the English version, and the browser console indicates CORS policy errors due to blocked font access from one domain to another. Solution: To resolve this issue, you need to adjust the CORS policy on your server. Follow the guidelines provided in these resources:
Ensure that your server configuration aligns with these guidelines, especially if you are using a LiteSpeed server and have LSCache enabled, as it may ignore or override these directives.
If this solution does not apply to your case, or if it seems outdated, we recommend opening a new support ticket. We also highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. For further assistance, please visit our support forum.
This is the technical support forum for WPML - the multilingual WordPress plugin.
Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.
Background of the issue:
I am trying to resolve an issue with Google Fonts not loading correctly on my multilingual website. I have WPML set up with two different domains for my languages: Italian (.it) and English (.org). The issue can be seen at hidden link.
Symptoms:
When visiting the Italian domain (www.coehar.it), I see different fonts compared to the English version (www.coehar.org). The browser console shows CORS policy errors: 'Access to font at 'hidden link' from origin 'hidden link' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.' Despite trying several solutions, the CORS errors persist.
Questions:
Could you provide a definitive solution for resolving the CORS error with Google Fonts on my multilingual site?
I can add the following information, which seems to be related.
the login only happens through coehar.org/wp-admin, if I type coehar.it/wp-admin I am redirected to coehar.org/wp-login.php. However, if I type coehar.it/wp-login.php I can log in to coehar.it/wp-admin. In the latter case I can see the fonts correctly on both the .it and .org. Vice versa, once I have logged in for the first time to coehar.it/wp-admin, every subsequent login by typing coehar.org/wp-admin, I am redirected to coehar.it/wp-login.php, and to log in again to the .org I have to type coehar.org/wp-login.php this time. In both cases, the WordPress toolbar that appears on the frontend when you are connected is only visible on the domain with which I am logged in, and this is particularly inconvenient.
Languages: English (English )Spanish (Español )German (Deutsch )
Timezone: Europe/Madrid (GMT+02:00)
Hi,
This behavior is expected. Your server is currently configured to block requests from the secondary domain when loaded from the main domain.
To resolve this, you need to adjust the CORS policy on your server as outlined here: WPML Forum - CORS Issue. You can find additional information on CORS configuration here: Enable CORS.
I've already tried the following solutions without success:
1. Adding CORS headers to my .htaccess file:
<FilesMatch "\.(eot|otf|ttf|woff|woff2)$">
Header always set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
</FilesMatch>
2. Adding a more specific Access-Control-Allow-Origin header in .htaccess:
Header set Access-Control-Allow-Origin "hidden link"
3. A wordpress plugin that handles CORS.
4. Following the WPML documentation for Elementor font issues:
- In WPML > Translation Management, I set "Custom Fonts" (elementor_font) to translate
- In the Custom Fields Translation section, I can't find "elementor_font_files" to translate, maybe because I'm not using custom fonts.
Good morning,
I think I understood why I encounter the problem even though I do not use custom fonts.
The Load Google Fonts Locally feature has become available on Elementor only a few months ago, which loads Google fonts from a folder on the website, which is a bit like using a custom font.
In fact, by deactivating this feature it works correctly.
But I would like to continue using this feature for various reasons (performance and GDPR mainly) but solution 4 above refers specifically to custom fonts.
Which entry can I go and translate on Translation Management to obtain the same result? I believe this solution could work, because with the htaccess strings didn't work for me.
Languages: English (English )Spanish (Español )German (Deutsch )
Timezone: Europe/Madrid (GMT+02:00)
There is no other option available, as Elementor only handles the specified options within a custom post. Anything outside of that must be managed through server configuration. When adjusting the Apache configuration, be aware that there could be potential conflicts.
Additionally, LiteSpeed may ignore or override these directives, particularly when LSCache is enabled.
