Font Blocked due to Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’

This error arises when a WordPress powered website moves to new location with a different URL. The error shown will look alike as ‘Font Blocked due to Cross-Origin Resource Sharing policy: No Access-Control-Allow-Origin’. Instead, the browser shows the square box for a character. Moreover, these fonts are most likely being a part of the scalable vector fonts (i.e. Font Awesome). The website powered by CDN networks or uses  multiple hosting location may have more chance to be a victim of this error.

First, confirm that the paths given in the WordPress Dashboard > Settings > General Settings are following the same URL structure. For example, the one URL with WWW and another without WWW can cause an error. If not, then use correct URL structure.

Cross Origin Resource

Wrong combination of URL

 

The above method will be solve your problem. Beware, you must empty all the catches, if you are using cache plugins like W3 Total Catch or WP Super Catch.

If the problem still alive then go to the root path of a website. Generally, the path something like ‘home/xyz/public_html’. You can use cPanel of FileZilla for the same. Now edit the ‘. htaccess’ file located in a root directory. In case unavailability of .htaccess then create new one.

Copy following code into .htaccess.

 <IfModule mod_headers.c>
 Header add Access-Control-Allow-Origin "*"
 </IfModule> 

The above code works for non-WordPress website also.