Google 字体无法使用

Question

我遇到了一个很奇怪的问题。我试图在我的 HTML 的头部包含来自 Google 字体 "Yanone Kaffeesatz" 的字体，然后使用它来使用 font-family 属性。但即使我按照 Google 的说明进行操作，我的浏览器仍然显示标准的 sans-serif 字体。我哪里出错了？

截图：https://docs.google.com/drawings/d/1NCq3ch0ClzaWfniSDKQJa9C-fX9zXH8-R-I7GnjqqbI/edit?usp=sharing

代码：

<!DOCTYPE html> 
<html>
<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="responsive.css">
  <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700' rel='stylesheet' type='text/css'>
</head>



 h1, h2 {
    color: black;
    font-family: 'Yanone Kaffeesatz', sans-serif;
  }

Answer 1

您可能需要引用 https:// 协议而不是 http://。尝试在浏览器中加载的安全页面上加载不安全内容可能会被浏览器阻止 url。

要对此进行测试，您也可以尝试在没有 https:// 的情况下刷新您的站点，看看它是否能正确显示字体。

由于您的屏幕截图来自 c9.io 的预览 URL，并且您最终的生产站点可能未使用 SSL。你可能想通过省略协议的 http: 部分来更改你的 link href 并只使用
//fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700 这将自动尝试从站点当前使用的任何协议中提取资源。

Google 字体无法使用

Google Fonts Won't Work

html

css

fonts

font-family