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

Question

我在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;
}

Answer 1

创建一个 css 文件调用 custom-fonts.css 或您喜欢的任何内容

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

转到theme.liquid

找到您的 theme.scss.css 或 theme.css 行并把这行放在

之后

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

Answer 2

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

Answer 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。

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

Where do I define @font-face in shopify?

schema

product

font-face

shopify