下载谷歌字体woff2放到服务器cancel加载失败provisional headers are shown

由于谷歌被墙的原因，无法直接引用谷歌的css资源和字体，要想引用谷歌的字体，可以先翻墙，将css文件中的woff2，woff之类的字体文件下载下来放到自己的服务器上。

　　最近将谷歌字体Open Sans字体下载下来放到自己服务器后，web服务器已经配置好woff，woff2字体文件的mime类型font/woff2，可以访问woff2字体文件弹出下载框，但是加载css文件，本地file测试就是无法使用Open Sans字体，没有效果。

　　用firefox浏览器查看网络字体文件正常下载，大小也是对的，但是谷歌字体就是无效。用谷歌浏览器查看后发现下载字体文件出错，网络状态为canceled。

　　查看响应头，请求头出现警告，provisional headers are shown，如下图

　　看来本地file加载的网络css文件中包含了字体，加载字体文件会出现跨域错误。于是给google-fonts文件夹加上Access-Control-Allow-Origin响应头，刷新，正常加载字体，谷歌Open Sans字体效果也出来了。看来woff字体文件加载需要同源，不同源加载不了字体文件。

　　经过翻墙，清空缓存浏览器缓存，从谷歌网站加载css测试，谷歌的css字体文件也是添加过Access-Control-Allow-Origin响应头的。

　　总结：导入的外部css文件如果包含字体，由于不通源，css中的字体文件将会无法下载，无法使用指定的字体。解决办法就是外部字体设置过Access-Control-Allow-Origin响应头允许跨域加载。或者自己将css文件中的字体文件下载放到自己的服务器，从自己的服务器加载字体文件，同源就行了。

　　提供２个css测试，第一个没有设置响应头，无法使用谷歌的Condiment字体，第二个设置过允许跨域加载woff2字体文件，可以显示出Condiment字体效果。

http://www.w3dev.cn/demo/google-fonts-no-header/Condiment.css

http://www.w3dev.cn/demo/google-fonts/Condiment.css

 

/* latin-ext */
@font-face {
  font-family: 'Condiment';
  font-style: normal;
  font-weight: 400;
  src: local('Condiment'), local('Condiment-Regular'), url(oNYD56vpVs4G0nM6ti4yOBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Condiment';
  font-style: normal;
  font-weight: 400;
  src: local('Condiment'), local('Condiment-Regular'), url(H3zUdSYh9r5ccxclUWaH7ltXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}