在 Shopify 液体中使用 @font-face 时的字体文件 404

Posted 2023-02-15

【中文标题】在 Shopify 液体中使用 @font-face 时的字体文件 404

【英文标题】：Font file 404 when using @font-face in Shopify liquid

【发布时间】：2015-10-17 02:33:21

【问题描述】：

我浏览了所有可以在此处和 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;

我在主题的“资产”文件夹中拥有所有列出的字体文件，以及正确的文件名和扩展名。

我正在使用 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标签格式正确，字体文件在它们应该在的位置，所以生成的文件路径应该是正确的，但没有似乎是。如果有人能够对此有所了解，我将永远感激不尽！干杯！

【问题讨论】：

您的浏览器控制台中是否有任何错误？我遇到了显示在那里的字体的跨域问题。

您是否在 shopify.com 上开发您的商店？或者您下载了文件并在您的服务器上进行了设置？

@MaximillianLaumeister - 控制台中唯一的其他错误是 3 个“未捕获（承诺中）404”错误，这些错误似乎与 doctype 标签有关，不确定这是否相关？

@ayadibaha 我正在通过我的合作伙伴帐户在 Shopify 上的开发商店中进行开发。 Shopify 主题编辑器允许我在本地编辑文件并在保存时将它们上传回 Shopify。

【参考方案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 主题的 assets 文件夹中的字体文件和 styles.scss.liquid 文件进行了这些更改，字体就会开始加载并按应有的方式显示。

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

【讨论】：

感谢您回答您自己的问题。为我节省了很多时间。对我来说，我的字体名称中有连字符和大写字母，两者都导致了这个问题。我还想补充一点，我在这方面遇到了额外的困难，因为 shopify 无法将内容从 caps 重命名为 nocaps（从 ABCdef.ttf 重命名为 abcdef.ttf），而且 mac 'shopify theme' 应用程序没有给你任何关于重命名不成功的反馈。以防万一其他人偶然发现这一点。再次感谢 SilentDesigns

哇...我花了几个小时解决这个问题。我以为这是我在我的 react 应用程序中调用它的方式，来发现它是名称中的愚蠢破折号......谢谢你回答这个问题，你救了我的培根。

?啊哈，谢谢！我也错过了“font-name.woff2”周围的引号。

哇，你应该得到一枚奖牌.. 花了太多时间在这上面 - 就像现在使用大写命名的魅力一样，这也不起作用 - 谢谢