Google CDN 未为 AMP 页面缓存自托管的网络字体答案

【问题标题】：Self-hosted webfonts not being cached by Google CDN for AMP pagesGoogle CDN 未为 AMP 页面缓存自托管的网络字体
【发布时间】：2016-05-05 16:03:08
【问题描述】：

我的公司最近开始为我们的一个网站试验 AMP 网页。这个过程效果很好，我们看到 Google 将我们的网页编入索引，以便在 AMP 轮播中使用：Mobile Google Search result for PennLive.com。

但是，我们的字体资源在 Google 轮播中返回为 404，尽管它们直接在我们的 AMP 页面上工作。

https://cdn.ampproject.org/r/www.pennlive.com/static/common/fonts/v1/benton-sans-medium/448c4642-c106-472f-9c6a-a4d7b5347b03-3.woff 返回404

而：

http://www.pennlive.com/static/common/fonts/v1/benton-sans-medium/448c4642-c106-472f-9c6a-a4d7b5347b03-3.woff 返回200

在 amphtml 文档中，它说必须通过 http 或 https 提供自托管字体，这就是我们正在为我们的页面所做的，AMP 页面显然正在验证。

为什么这些字体在 Google AMP 轮播中没有返回 200？

示例页面：http://www.pennlive.com/articles/18505993/penn_state_commit_damion_barbe.amp

https://www.google.com/amp/www.pennlive.com/articles/18505993/penn_state_commit_damion_barbe.amp#development=1

【问题讨论】：

标签： amp-html

【解决方案1】：

您的服务器正在为 .woff 字体文件返回一个无效的内容类型。

$ curl -I http://www.pennlive.com/static/common/fonts/v1/benton-sans-medium/448c4642-c106-472f-9c6a-a4d7b5347b03-3.woff

HTTP/1.1 200 OK
Date: Fri, 20 May 2016 17:27:48 GMT
Last-Modified: Wed, 18 May 2016 15:03:07 GMT
Accept-Ranges: bytes
Cache-Control: max-age=604800
Expires: Fri, 27 May 2016 17:27:48 GMT
Content-Type: text/plain; charset=UTF-8
X-Varnish: 198714588
Via: 1.1 varnish-v4
X-ADI-VCache: MISS
Content-Length: 54040
Connection: keep-alive

注意Content-Type: text/plain;

我想你想要application/x-font-woff 或font/woff

【讨论】：

我要解决这个问题，看看字体是否出现。如果可行，我会接受这个答案。
这个解决方案对我有用。字体返回正确的类型，现在它们出现在轮播中。感谢您的所有帮助。

【解决方案2】：

查看您的AMP 页面会很有帮助；否则我试图推断可能发生的事情。

Font Awesome 字体也有类似的问题。终于发现了这个方法：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
  rel="stylesheet" 
  integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" 
  crossorigin="anonymous"
>

我看到benton-sans-medium 可能是您获得许可的字体。如果他们会为您提供字体，那么上述方法可能很有用。

【讨论】：

我添加了一个示例页面供您查看。 Google CDN 和托管版本都在那里。
没有看到任何字体问题。使用 Chrome 开发工具时，我看到的错误消息与 "[amp-analytics.Transport]" "Failed to send image request" 相关，richmetrics.com 发生了一些事情；也许pageviewWidth。考虑使用analytics 的子集进行测试。
杰伊。这些是正常错误，不会影响 AMP 验证。如果您查看第二个链接，即 Google 轮播，您会看到所有字体都返回 404。非 Google 轮播页面没有问题。
是的，我确实看过那个链接。但这不是AMP 文档；这是一个 JavaScript 文档。自己点一下。它确实指向第一个链接，这是我检查的那个。没错，第一个链接是 AMP 有效的。我能看到的唯一问题是上面报告的。您是否打算提供其他链接？
哦，是的。我现在看到了。那是无意的。查看此问题的唯一方法是通过 Google 搜索结果中的 AMP 轮播。尝试在 Chrome 上模拟移动设备并在 google.com 上搜索“pennlive”。轮播中的文章是有问题的。