(Google) Webfont 只能在本地工作

Question

我有一个关于网络字体的奇怪问题，我还没有找到任何答案——实际上连一个问题都没有...

我有一个使用 Google 网络字体的网站。当从本地磁盘在浏览器中打开时，这显示得很好。但是，一旦我将站点上传到服务器并从那里访问它，就会使用指定的后备字体。

字体导入在CSS喜欢

/* Main sans font (headings)*/
@import url(http://fonts.googleapis.com/css?family=Cabin:400,700);
/* Main serif font (text)*/
@import url(http://fonts.googleapis.com /css?family=Crimson+Text:400,400italic,600,600italic,700);

然后像这样使用（例如）

body {
    font-family: "Crimson Text","Georgia",serif;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

我没有（真正的）线索导致这种行为的原因是什么，唯一的猜测是：

CSS中的某些内容通过绝对路径引用了一些本地资源
某些相对路径在本地打开的文件中的解析方式与在 Web 服务器上的解析方式不同。

从什么地方开始调查（如果这不是一个明显的问题）？

Answer 1

import fonts from https://... url

google font reference

@import url('https://fonts.googleapis.com/css?family=Lato|Roboto');
p:first-child{font-family: 'Roboto';}
p:last-child{font-family: 'Lato';}

<p>https://fonts.google.com<p>
<p>https://fonts.google.com<p>

(Google) Webfont 只能在本地工作

(Google) Webfont only works locally

css

google-webfonts