如何在JSFiddle中包含Google字体？

Question

我试图在jsFiddle中包含Google字体但没有成功。我将URL添加到“外部资源”，但它包含在<script>。

中

这是我想要包含的字体：

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>

Answer 1

Webfonts必须包含在CSS象限中，使用@import：

@import url(//fonts.googleapis.com/css?family=Oswald:400,700,300);

Answer 2

如果您没有在线获取任何网址（只能在本地计算机上使用），您可以使用dataURL

@font-face {
  font-family: 'us101';
  src: url(data:font/truetype;charset=utf-8;base64,AAEAAAASAQA...);
}

Answer 3

在您的HTML页面（或模板）上找到此行：

<link href='http://fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>

并将其更改为此：

<link href='//fonts.googleapis.com/css?family=Dosis:400,700' rel='stylesheet' type='text/css'>

此简单更改将使您的浏览器以适用的模式（HTTP与HTTPS）调用Google字体页面。

来源：https://www.amixa.com/blog/2012/06/06/how-to-use-google-fonts-under-both-ssl-and-non-ssl-without-ssl-insecure-messages/