我在 shopify 中的哪里定义 @font-face？答案

【问题标题】：Where do I define @font-face in shopify?我在 shopify 中的哪里定义 @font-face？
【发布时间】：2021-04-22 09:57:46
【问题描述】：

我在 Shopify 的资产中上传了一些与字体相关的文件。但我不知道在哪里以及如何定义下面的代码。

@font-face {
    font-family: 'FreeSansBold';
    src: url('FreeSansBold.eot');
    src: url('FreeSansBold.eot?#iefix') format('embedded-opentype'),
        url('FreeSansBold.woff2') format('woff2'),
        url('FreeSansBold.woff') format('woff'),
        url('FreeSansBold.ttf') format('truetype'),
        url('FreeSansBold.svg#FreeSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

【问题讨论】：

你用的是什么主题？

标签： schema shopify product font-face

【解决方案1】：

您可以直接将代码包含在主题的 theme.css 文件中，而不是创建新文件并增加 https 计数

【讨论】：

【解决方案2】：

创建一个css 文件调用custom-fonts.css 或任何你喜欢的东西

添加您拥有的@font-face 代码并将font-family 声明到标签

转到theme.liquid

找到您的 theme.scss.css 或 theme.css 线路并把这一行放在后面

{{'custom-fonts.css' | asset_url | styplesheet_tag}}

【讨论】：

【解决方案3】：

要引用字体文件，您需要使用asset_url url filter。您可以通过将文件名传递给过滤器来做到这一点，如下所示。

例如。


@font-face {
    font-family: 'FreeSansBold';
    src: url("{{ 'FreeSansBold.eot' | asset_url }}");
    // ... repeat for other urls
}

请注意，这仅适用于以.liquid 结尾的文件，例如theme.liquid 或fonts.css.liquid。

【讨论】：