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

Question

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

Answer 1

使用导入方法:

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

显然,"Open Sans"是导入的字体.但你可以用你的替换它.如果它是一个单词字体,只要在@import它是两个单词之后包括字体名称,就像我一样,并Open+Sans在每个单词之间添加一个符号.

注意:将+在很 CSS文件的第一行.(感谢@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

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

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

Answer 4

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

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

用您的字体名称替换Open + Sans参数值.

您的CSS文件应如下所示:

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

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

Answer 5

1. 只需访问https://fonts.google.com/
2. 单击+添加字体
3. 转到所选字体>嵌入> @IMPORT>复制网址并粘贴到正文标记上方的.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;}