问题与@ font-face在mozilla，而使用Shopify [英] issue with @font-face on mozilla while using Shopify

问题描述

我使用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;
}

我已将图像文件夹中的字体保存。因为它没有采取字体，我在我的css文件中的文件夹中创建了字体的副本。

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.

现在它在chrome上工作得很好。但在mozilla的字体没有读到。
我发现我们可以通过添加htaccess到包含内容的css文件夹的文件夹中来解决这个问题。

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>

这在firefox中没有任何区别。那么我们如何解决这个问题呢？任何想法？

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

推荐答案

尝试对字体文件使用绝对URL。

Try using an absolute URL to the font file.

这篇关于问题与@ font-face在mozilla，而使用Shopify的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！