在 Shopify liquid 中使用 @font-face 时出现字体文件 404

Question

我浏览了在这里和 Shopify 论坛上可以找到的所有帖子，并尝试了一些不同的方法，但遗憾的是未能解决我的问题。我正在使用 Shopify 主题编辑器应用程序和 Sublime 文本在 Shopify 开发商店上进行开发。

在我的 Shopify 主题中，我在 styles.css.liquid 文件中使用 @font-face 来加载自定义字体：

@font-face {
    font-family: 'gotham-book';
    src: url(' {{ 'gotham-book-webfont.eot' | asset_url }} ');
    src: url(' {{ 'gotham-book-webfont.eot?#iefix' | asset_url }} ') format('embedded-opentype'),
    url(' {{ 'gotham-book-webfont.woff2' | asset_url }} ') format('woff2'),
    url(' {{ 'gotham-book-webfont.woff' | asset_url }} ') format('woff'),
    url(' {{ 'gotham-book-webfont.ttf' | asset_url }} ') format('truetype'),
    url(' {{ 'gotham-book-webfont.svg#gothambook' | asset_url }} ') format('svg');
    font-weight: normal;
    font-style: normal;
}

我在主题的 'assets' 文件夹中有所有列出的字体文件，文件名和扩展名都是正确的。

我正在使用 font-family 在需要的地方加载字体，仍在 styles.css.liquid，例如：

.some-element {
    font-family: 'gotham-book', Helvetica, Arial, sans-serif;
}

问题是当我加载页面时，没有加载字体。当我在 Chrome 开发工具中检查页面时，它告诉我正在查找但未找到字体文件，例如：

GET http://cdn.shopify.com/s/files/1/0924/9286/t/3/assets/gotham-book-webfont.ttf?13846384044068149085 404 (Not Found)

字体文件在本地页面上加载正常，据我所知，我的 asset_url 标签格式正确，字体文件在它们应该在的位置，所以生成的文件路径应该是正确的，但似乎不是。如果有人能够对此有所了解，我将永远感激不已！干杯！

Answer 1

经过 2 天的折腾，最终解决这个问题的是更改字体的文件名并删除其中的所有连字符。所以 @font-face css 从这个改变：

@font-face {
    font-family: 'gotham-book';
    src: url(' {{ 'gotham-book-webfont.eot' | asset_url }} ');
    src: url(' {{ 'gotham-book-webfont.eot?#iefix' | asset_url }} ')     format('embedded-opentype'),
    url(' {{ 'gotham-book-webfont.woff2' | asset_url }} ') format('woff2'),
    url(' {{ 'gotham-book-webfont.woff' | asset_url }} ') format('woff'),
    url(' {{ 'gotham-book-webfont.ttf' | asset_url }} ') format('truetype'),
    url(' {{ 'gotham-book-webfont.svg#gothambook' | asset_url }} ') format('svg');
    font-weight: normal;
    font-style: normal;
}

为此：

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

对字体文件和 Shopify 主题资产文件夹中的 styles.scss.liquid 文件进行这些更改后，字体开始加载并按预期显示。

我不记得在 Shopify 文档中的任何地方读过任何关于资产文件命名约定的内容，所以希望这可以在将来节省一些时间！

在 Shopify liquid 中使用 @font-face 时出现字体文件 404

Font file 404 when using @font-face in Shopify liquid

css

liquid

font-face

shopify