Question

由于某种原因，我试图在Shopify网站上实现的自定义字体根本无法工作。我将字体上载为素材资源，并在theme.scss文件中使用了代码：

         @font-face {
           font-family:'Neue-Haas-Grotesk', sans-serif;
           src: url(Linotype-NHaasGroteskDSStd-65Md.ttf);
           font-weight: 900;
           font-style: normal;}

然后我添加了以下代码，以使其在网站的某些部分上显示：

   .site-nav { font-family: "Neue-Haas-Grotesk" !important; }

我使用Arial Black ttf文件尝试了此确切的代码模板，该文件作为资产上传，但是由于某种原因，该字体无法正常工作。关于如何使现在和将来在任何站点上的Shopify上正常工作的任何建议？

Answer 1

我认为您只需要确保@font-face声明的网址正确即可。资产文件将从Shopify的CDN（内容交付网络）提供，因此您将需要使用asset_url过滤器来获取正确的地址。

这有望达到目的：

@font-face {
   font-family:'Neue-Haas-Grotesk', sans-serif;
   src: url({{ 'Linotype-NHaasGroteskDSStd-65Md.ttf' | asset_url }});
   font-weight: 900;
   font-style: normal;
}

Answer 2

我对Shopify也并不陌生，寻找上传我为网站购买的自定义字体的答案。现在，据我所知，它们需要上传到shopify CDN，然后需要导入到CSS中。

有人可以指导，确切地将文件上传到哪里（我只拥有.otf文件，足够吗？），然后在该帖子中按照上面的答案进行发布。

将自定义字体添加到Shopify问题

2 个答案: