未能解码下载的字体，但使用正确的CSS字体面板

Question

我使用以下代码将google "Syncopate“导入到我的shopify站点：

@font-face {
    font-family: 'Syncopate';
    font-weight: 400;
    font-style: normal;
    src: url('//cdn.shopify.com/s/files/1/0633/5778/0153/t/2/assets/Syncopate-Regular.eot'); /* IE9 Compat Modes */
    src: url('//cdn.shopify.com/s/files/1/0633/5778/0153/t/2/assets/Syncopate-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('//cdn.shopify.com/s/files/1/0633/5778/0153/t/2/assets/Syncopate-Regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('//cdn.shopify.com/s/files/1/0633/5778/0153/t/2/assets/Syncopate-Regular.woff') format('woff'), /* Pretty Modern Browsers */
         url('//cdn.shopify.com/s/files/1/0633/5778/0153/t/2/assets/Syncopate-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('//cdn.shopify.com/s/files/1/0633/5778/0153/t/2/assets/Syncopate-Regular.svg#Syncopate') format('svg'); /* Legacy iOS */
  } 

我从google字体下载了.tff文件，并用transformer.org创建了字体面板。在greenjet.at的控制台中，我现在得到以下错误：

• 无法解码下载的字体(woff2、woff、ttf)
• OTS解析错误:解压缩WOFF2.0的大小小于压缩大小
• OTS解析错误: WOFF头文件大小不正确
• OTS解析错误: FFTM:对齐表

当使用google字体链接实现它时，它工作得非常完美：

<link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Syncopate">

但是，由于谷歌的隐私问题，有必要在本地加载字体。这里的错误是什么？是否shopify资产文件上传器可能使用ASCII而不是二进制文件传输导致此错误？

Answer 1

Otfs解析错误通常表明您的字体文件无效。

上述字体文件肯定已损坏/无效。

您的@font-face规则看起来很好。

尽管transfonter通常是相当可靠的，但是您可能已经应用了选项(替换、度量调整)，这使得文件结构无效。

不要转换主truetype文件，而是尝试通过谷歌网页字体助手。获取所有字体文件。

然后尝试上载/替换字体文件。

调试:您应该能够下载新的truetype字体并在桌面环境(win、MacOs、Linux)中双击它。

如果您的操作系统仍然困扰您一个无效的格式-有问题的shopify上传。

所以你应该联系shopify的支持部门。

也许在文件上传程序中有一个错误(例如转换编码)。

Answer 2

添加下面的代码，用实际数据替换突出显示的代码元素。

字体名称>字体名称。如果字体的名称中有多个单词，它将需要“引号”；

文件名>刚刚上载到主题的文件名，包括文件扩展名，例如cosmic_sans_bold.ttf。

格式>已上载字体的格式。例如，对于Athena.ttf，这将是"TrueType“。

@font-face {
    font-family: "Font name";
    src: url({{ "Filename" | asset_url }}) format("Format");
}

可用字体格式："woff“、"woff2”、"truetype“、"opentype”、"embedded-opentype“和"svg”。

Answer 3

主题字体

非管理

将字体文件添加到资产目录中。

创建一个@font-face CSS规则，以便您可以引用字体。使用asset_url filter输出字体文件的URL：

@font-face {
   font-family: "Font name";
   src: url("{{ '[font-file-name]' | asset_url }}") format("[font-format]");
}

共享管理

将字体文件上载到管理程序的“设置”>“文件”部分。

创建一个@font-face CSS规则，以便您可以引用字体。使用file_url filter输出字体文件的URL：

@font-face {
   font-family: "Font name";
   src: url("{{ '[font-file-name]' | file_url }}") format("[font-format]");
}