向Shopify问题添加自定义字体

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声明的URL是正确的。资产文件将从Shopify的内容分发网络(内容分发网络)提供服务，因此您将希望使用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文件，足够吗？)，张贴，我可以按照上面的答案在此线程。