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

【问题标题】：Adding Custom Font to Shopify Issue将自定义字体添加到 Shopify 问题
【发布时间】：2020-10-07 02:55:27
【问题描述】：

由于某种原因，我尝试在我的 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 现在和将来在任何网站上正常工作的任何建议？

【问题讨论】：

您应该将字体转换为 webfont 并使用 woff/woff2 (transfonter.org) 而不是只使用 ttf。
感谢您的建议！我现在就去试试！

标签： css fonts shopify font-face

【解决方案1】：

我认为您只需要确保您的 @font-face 声明的 URL 正确无误。资产文件将从 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;
}

【讨论】：

哦，好的，知道了！谢谢你！您是否有机会知道上传的 ttf 或 otf 文件是否重要？
TTF 和 OTF 通常应该可以互换。以下是我发现的一些关于网络不同字体格式的文章：css-tricks.com/understanding-web-fonts-getting w3schools.com/css/css3_fonts.asp
看起来这种改变奏效了！！我添加了一个 woff 和 woff2 文件。但是，字体应该比现在看起来更粗/更粗。我什至将字体样式更改为“粗体”，但似乎没有任何改变。你对我如何解决这个问题有什么建议吗？
我相信您还需要上传字体的粗体版本。如果您查看此 StackExchange 问题，请注意答案使用不同的字体文件进行常规和粗体声明：stackoverflow.com/questions/9243419/…
哦，好的，知道了。非常感谢你的洞察力戴夫！我还想看看您是否有机会知道为什么网站某个部分的特定字体更改没有变化？由于某种原因，一些按钮的字体根本没有改变。即使我输入如下代码：.btn--secondary,.btn--tertiary, .btn--secondary-accent, .btn.shopify-payment-button, .btn.shopify-payment-button__button--unbrand { font-家庭：“Neue-Haas-Grotesk”，无衬线；字体粗细：900 !important;

【解决方案2】：

我也是 Shopify 的新手，正在寻找上传我为我的网站购买的自定义字体的答案。现在，据我所知，他们需要上传到shopify cdn，然后需要在css中导入。

有人可以指导一下，上传文件的确切位置（我只有 .otf 文件，足够了吗？），我可以在这个帖子中按照上面的答案发布。

【讨论】：

你可以关注这个链接support.weareunderground.com/article/…