issue with @font-face on mozilla while using Shopi

Question

I am using the css

 @font-face {
 font-family: ChangaOne-Regular;
 src: url({{ 'changaone-regular.eot' | asset_url }});
 src: url({{ 'changaone-regular.eot?#iefix' | asset_url }}) format('embedded-opentype'),  url({{ 'changaone-regular.woff' | asset_url }}) format('woff'),  url({{ 'changaone-regular.ttf' | asset_url }}) format('truetype'),  url({{'changaone-regular.svg#changaone-regular' | asset_url }}) format('svg');
 font-weight: normal;
 font-style: normal;
}

I have saved the font in images folder. Since it was not taking the font I created the copy of the font in the folder within my css file.

Now it is working perfectly on chrome. But in mozilla the font is not getting read. I found that we can fix this by adding htaccess to the folder of the css file with content

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

This is also not making any difference in firefox. So how can we fix this? any idea?

Answer 1

Try using an absolute URL to the font file.