谷歌字体无法加载答案

【问题标题】：Google Fonts Font Doesn't load谷歌字体无法加载
【发布时间】：2013-07-16 17:29:06
【问题描述】：

我正在尝试将 PT Sans 添加到时事通讯中，但由于某种原因它没有加载我已经复制了几乎所有的代码，但它不起作用。我会非常感谢任何可以提供帮助的人。

这是 CSS 代码：

h1, h2, h3 {
    font-family: 'PT Sans', sans-serif;
}

和 HTML 代码：

<link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">

编辑：下面是 CSS 的其余部分：

h1, h2, h3 {
    font-family: 'PT Sans', sans-serif;
}

#logo{width:810px}

#saveDateText{
    position:relative;
    top:30px;
    left:80px;
    font-size:50px;
    color:rgb(228,242,214)
}

#october{
    position:relative;
    top:0px;
    left:90px;
    font-size:35px;
    color:rgb(228,242,214)
}

#raftLogo{
    position:relative;
    top:-125px;
    left:550px;
}

#saveTheDate {
    background-color:rgb(123, 190, 48);
    height:170px;
    width:810px;
}

#honoring {
    position:relative;
    background-color:rgb(9, 65, 30);
    width:810px;
    top:-30px;
    font-size:20px;
    height:400px;
}

#honoringTextDiv {
    position:relative;
    width:740px;
    left:70px;
    top:50px
}

#infoText {
    color:white;
    font-size:25px;
}

#honoringText {
    color:rgb(242, 183, 51);
}

#benifit{
    color:white;
    font-size:25px
}

#morgridge {
    position:relative;
    top:20px
}
#sponsorships {
    position:relative;
    left:20px;
    top:-30px;
    height:300px;
    width:400px;
    border-right-style:solid;
    border-right-color:rgb(160, 202, 129);
    border-right-width:1px;
}

#inventiveSponsorsDiv {
    position:relative;
    left:425px;
    top:-155px
}
#dmns {
    position:relative;
    top:-40px;
}
#1stbank {
    position:relative;
    top:80px;
}

#inspirationalSponsors, #inventiveSponsors{
    position:relative;
    top:0px;
    color:rgb(123,190,48);
    font-size:18px;
}
#inventiveSponsors {
    top:-20px;
}

#names, #names2 {
    line-height:25px;
    font-size:14px

}
#names2 {
    position:relative;
    top:-94px;
    left:160px;
    text-align:left;
}

【问题讨论】：

您确定没有其他样式覆盖它吗？那应该可以正常工作。
你用的是什么浏览器？是否支持嵌入字体？您是先加载PT Sans 样式，然后再尝试使用该字体吗？
我们能否看到 CSS 和 HTML 的其余部分，以防被其他样式覆盖，就像 Torr3nt 所说的那样。
我使用的是谷歌浏览器。指向我的 CSS 的链接位于 Google 字体 CSS 之后。

标签： css google-font-api

【解决方案1】：

尝试使用不带“http”的网址：

<link href="//fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">

【讨论】：

@BartFriederichs 省略协议将导致链接使用与当前页面 URL 相同的协议。该链接在用于 https URL 时将解析为 fonts.googleapis.com，在用于 http URL 时将解析为 fonts.googleapis.com。
@ChrisParton 并注意您的浏览器可能不会在 HTTPS 站点上加载站外 HTTP 资源。

【解决方案2】：

小贴士：
1. 在您的<head> 开头使用 HTML 代码，然后再使用其他任何内容。示例：
<head> <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'> /* Rest of the code after this */ </head>
2。如果这不起作用，请将其放入您的 CSS 文件中： @import url(http://fonts.googleapis.com/css?family=PT+Sans);

【讨论】：

根据您的编辑，您的 CSS 不应覆盖它。您应该尝试使用答案中的一种解决方案。
遗憾的是，这些都不起作用。尽管如此，我还是非常感谢你试图提供帮助。这让我很生气。

【解决方案3】：

这样问自己：

1. Are you developing online or offline (if online check number 2)

2. Make sure your browser does not have a shield icon because this 
   means the browser is blocking the font and you need to click
   the allow button.

3. Check for spelling errors or anything suspicious.

4. Finally @import is the safest way I think.

【讨论】：

【解决方案4】：

我有同样的问题，如果使用 CSS 标记：

"字体：3em 粗体；" --- 这会覆盖 google api 调用并加载您的下一个默认字体。

解决方案：使用字体样式和字体大小

【讨论】：

【解决方案5】：

检查您的 css 文件是否在供应商样式表之后加载。例如，bootstrap.css 应该在您的 css 文件之前。

【讨论】：

【解决方案6】：

我今天遇到了这个问题。如果您使用 httpsurl 进行测试，则需要更改链接 href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" 通过href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"。否则会出现冲突问题。

我希望这会希望有人。

【讨论】：