如何在JSFiddle中使用Google字体？

Question

我试图在jsFiddle中引入谷歌字体，但没有成功。我已将URL添加到“外部资源”，但它作为<script>被包含。

这是我想要包含的字体:

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

- Gustavo

---

你也可以将<link>标签添加到html部分。 - KyleMit

Answer 1

Webfonts必须包含在CSS区块内，使用@import：

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

- Gustavo

---

在 URL 中必须使用 HTTPS 而不是 HTTP。 - Bula

@Bula，不需要使用https。然而，我删除了协议，让浏览器决定最好的方式。请参考这里：https://dev59.com/fmMl5IYBdhLWcg3w5aeQ - Guscie

请记得将@import规则放在CSS页面的顶部。此外，请检查您的控制台，以查找可能阻止样式显示的错误。 - HelloWorldPeace

Answer 2

如果您没有在线URL（仅限本地计算机），则可以使用dataURL。

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

- artgb

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 vs 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/

- mruanova