如何在CSS文件中导入Google Web Font？

Question

我正在使用CMS，我只能访问CSS文件。所以，我不能在文档的HEAD中包含任何内容。我想知道是否有办法从CSS文件中导入Web字体？

Answer 1

使用导入方法：

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

显然，“Open Sans”是导入的字体。但你可以用你的替换它。如果是单字字体，只需在family=...后面加上字体名称，如果是两个字，请按照我的方式操作，并在每个字之间添加+符号。

注意：将@import放在CSS文件的 very 第一行。（感谢@Ronny指出 >）。

在Google Webfont Library中，当您决定要使用哪种字体时，它会为您提供一个包含三个选项卡的框。每个选项卡都是注入方法，HTML，CSS或JavaScript。 @import选项卡应该为您提供css文件所需的代码。见图：

Answer 2

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

最好不要使用@import。只需在布局的头部使用link元素，如上所示。

Answer 3

在CSS文件中添加以下代码以导入Google Web字体。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  </div>

将 Open + Sans 参数值替换为字体名称。

您的CSS文件应如下所示：

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

Answer 4

下载字体ttf /其他格式文件，然后只需添加此CSS代码示例：

＆＃13;

＆＃13;

@font-face { font-family: roboto-regular; 
			 src: url('../font/Roboto-Regular.ttf'); } 
h2{
	font-family: roboto-regular;
}

＆＃13;

＆＃13;

＆＃13;

Answer 5

1. 只需转到https://fonts.google.com/
2. 点击 +
添加字体
3. 转到所选字体＆gt;嵌入＆gt; @IMPORT＆gt;将url复制并粘贴到body标签上方的.css文件中。
4. 已经完成了。

Answer 6

使用标签@import

@import url('http://fonts.googleapis.com/css?family=Kavoon');

Answer 7

除了上述答案外，还请考虑此站点； https://google-webfonts-helper.herokuapp.com/fonts

优势：

• 允许您自托管这些Google字体，以缩短响应时间

• 选择字体

• 选择您的字符集
• 选择字体样式/粗细
• 选择目标浏览器
• 然后您会得到CSS片段（添加到您的CSS样式表中）以及一个zip文件 字体文件包含在您的项目中

例如your_theme.css

 @font-face { font-family: 'Open Sans'; font-style: normal;  font-weight: 400;
             src: local('Open Sans Regular'), local('OpenSans-Regular'),
             url('css_fonts/open-sans-v15-latin-regular.woff2') format('woff2'), 
             url('css_fonts/open-sans-v15-latin-regular.woff') format('woff'); 
 }

 body { font-family: 'Open Sans',sans-serif;}

Answer 8

您也可以使用@ font-face链接到网址。 http://www.css3.info/preview/web-fonts-with-font-face/

CMS是否支持iframe？您也可以将iframe放入内容的顶部。这可能会慢一些 - 最好将它包含在CSS中。

Answer 9

Jus通过链接

https://developers.google.com/fonts/docs/getting_started

要将其导入样式表，请使用

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Answer 10

<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

要选择字体，您可以访问以下链接： https://fonts.google.com

从网站上写出您选择的字体名称（不包括括号）。

例如，然后选择“龙虾”作为您选择的字体，

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" 
type="text/css">

然后，您可以在整个HTML / CSS文件中正常使用它作为字体系列。

例如

<h2 style="Lobster">Please Like This Answer</h2>

Answer 11

我们可以在css3中轻松完成。我们必须简单地使用@import语句。以下视频轻松描述了如何执行此操作的方式。所以继续看看吧。

https://www.youtube.com/watch?v=wlPr6EF6GAo

Answer 12

自 2015 年以来，Google 方面发生了一些变化。我在找到它时遇到了一些困难，因此想包括新方法：

1. 向下滚动所需的字体页面
2. 点击字体名称旁边的小加号
3. 嵌入链接和其他选项将显示在网页右侧的“所选系列”对话框中。