Social icons appear as squares

Hi, Josh!

Thanks for sharing this info.

You can solve the cross-origin font file issue either by serving the font from the same domain as the page the icons appear on, or by using CORS to allow the font to be served from another domain.

Serving it on the same domain is sometimes simply a case of either:

• Going to Settings → General and making sure that your WordPress Address and Site Address are the same.
• Making sure that you redirect the www version of your site to the non-www version (or vice-versa).
• Adjusting CDN settings to exclude the font files.

If you can’t serve the font from the same domain for some reason, the .htaccess rule you cite is the simplest way of allowing the font to be served from another domain if you’re running Apache: https://enable-cors.org/server_apache.html

Thanks Nick!

The WP and Site address are indeed the same.
The www. subdomain redirects to the root version.

Will the htaccess rule interfere with the SSL or with the WooCommerce permalinks?

Thanks again!
-Josh

You’re welcome!

It won’t affect SSL or permalinks – clients just use the extra header to determine whether a request for a font is allowed or not. You can always revert if you do encounter issues, of course.

(Also, just to mention that the rule may need to be added to the other server, depending on where the font file is being served from – you should be able to identify this from the message in your console.)