Apache Access Control Allow Origin issue for woff2 file type

Question

I m facing an access control origin issue while trying to load a font awesome font face. This is the error message logged in Chrome browser console.

Access to Font at 'https://example.com/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0' from origin 'https://example2.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://example2.com' is therefore not allowed access.

And I have updated the apache2 server httpd.conf and enabled the headers.

<IfModule mod_mime.c>
    AddType application/font-woff2           .woff2
</IfModule>

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

and also I have try the same settings with the .htaccess file but the results was the same. It is bit weird, because I'm facing this issue only for woff2 file extension.

Answer 1

How to use a server script rather than a physical font file

<style type="text/css">
@font-face {
    font-family: 'OpenSans';
    src: url('path/to/fonts.php') format('woff2');
}
html, body{
    font: normal 16px OpenSans, sans-serif;
}
</style>

How to fix cross-domain @font-face issues with PHP

<?php
// fonts.php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/font-woff2");
echo @file_get_contents("path/fontawesome-webfont.woff2");
?>

Reference