Font Awesome errors in FIrefox

[mexpertsag]

Hi there,

on our Website in the header section we have our social media icons. The icons render well in Chrome. However there seems to be a problem in Firefox on a translated page with WPML. Please see these Screenshots: https://litmus.com/pub/7db0a6f

On the top right, there should be the icons. But they are replaced by some strange signs. The screens are shot from http://thenew.mexperts.com the english translation of the page. The problem does not exist on the german page available at http://thenew.mexperts.de.

Any ideas?

Thanks!
Florian

[Mohammad – SUPPORT]

Hi,
Please follow this article http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/ and let me know your feedback .
Thanks 🙂
With Best Regards
Swift Ideas

[mexpertsag]

Hi Mohammad,

thanks for the feedback. I added these lines to my .htaccess file but without success. The icons are displayed on http://thenew.mexperts.de but not on the http://thenew.mexperts.com alias domain.

Florian

[Mohammad – SUPPORT]

Hi,
Please provide me wordpress admin login and FTP login detail to debug the issue .
Thanks

[mexpertsag]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
I am getting this error
Forbidden
You don’t have permission to access /wp-login.php on this server.

Thanks

[mexpertsag]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please install WPIDE plugin.
Thanks

[mexpertsag]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Now , the developer of theme will assist you very soon .

Thanks 🙂
With Best Regards
Swift Ideas

[Swift Ideas – Ed]

Here is your error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://thenew.mexperts.de/wp-content/themes/dante/css/font/fontawesome-webfont.woff?v=4.0.3. This can be fixed by moving the resource to the same domain or enabling CORS.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://thenew.mexperts.de/wp-content/themes/dante/css/font/ss-gizmo.woff. This can be fixed by moving the resource to the same domain or enabling CORS.

See here for more info:

https://www.google.co.uk/search?q=enabling+CORS.&oq=enabling+CORS.&aqs=chrome..69i57.150j0j7&sourceid=chrome&es_sm=91&ie=UTF-8#q=enabling+CORS&safe=off

– Ed

[mexpertsag]

Hi Ed, thanks so much for your help. It works now.

So the solution for everyone hosting their one wordpress site on multiple domains (for example to have 2 different languages) and experiencing the described problems above. As Ed found out to enable CORS.

Here is how to do this on a Apache Web Server.

In the .htaccess file of your wordpress installation root ad the following block

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

Be sure mod.headers is enabled on your Apache. If you want to get sure shh your server with
a2enmod headers

and restart Apache to activate.
sudo service apache2 reload

Information about enabling CORS on other server environments can be found at
http://enable-cors.org/server.html

Have fun!
Florian

[Swift Ideas – Ed]

Glad I could help, thanks for detailing your solution 🙂

– Ed