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

258

我正在使用CMS，但我只能访问CSS文件。因此，我不能在文档的标题中包含任何内容。我想知道是否可以从CSS文件中导入Web字体？

css  fonts  google-webfonts 
— 大卫
source

Answers:

382

使用@import方法：

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

显然，“ Open Sans”（Open+Sans）是导入的字体。因此，将其替换为您的。如果字体名称包含多个单词，请通过添加一个网址对其进行网址编码+单词，请像我一样，在每个单词之间符号。

确保将 @import在任何规则之前在CSS的最顶部。

Google字体可以自动@import为您生成指令。选择字体后，单击其(+)旁边的图标。在左下角，将出现一个标题为“ 1 Family Selected”的容器。单击它，它将展开。使用“自定义”选项卡选择选项，然后切换回“嵌入”并单击“嵌入字体”下的“ @import”。将<style>标签之间的CSS复制到样式表中。

— 现代设计师
source
25
您应该避免使用@import，因为它会延迟加载包含的资源，直到提取文件为止。请在此处查看详细答案：stackoverflow.com/a/12380004/925560
— Renato Carvalho 2014年
5
将@import行移到顶部可以解决我的生活！谢谢！
— joalcego '16
2
Google为什么这样说？Google Insides声称不执行@import。 developers.google.com/speed/pagespeed/insights？
— 危险89年
2
这是一个过时的答案。@import按顺序加载，最好避免：varvy.com/pagespeed/avoid-css-import.html如今，加载Google字体的首选（默认）方法是使用<link>。
— Chuck Le Butt
2
当您来到SEO并开始使用Google PageSpeed见解来优化页面速度时，您会为此感到遗憾。使用<link>并优化交付。
— 会计师م18年
67 
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

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

— 伯克
source
19
您能否解释为什么“最好不要使用”？我搜索此问题是因为我想知道哪种方法最好。
— 亚当·霍洛
2
我有@import的Internet Explorer问题。有时只是不读。
— Burk
6
他专门说他不能在标题中使用<link>标记。
— 内森2015年
26
+1用于使用“链接”，因为它不会阻止并行加载其他外部文件。“导入”将阻止并行加载其他外部文件。
— Jahmic '16
2
通过使用@import，您可以使字体成为CSS样式的一部分，而不是HTML标记，从语义上来说，HTML标记更正确，并且可以通过CSS交换网站上的字体。但是正如查克（Chuck）所评论的那样，您似乎为此受到了轻微的打击。也许记下加载时间，然后逐案决定。请注意，对于SVG，@ import是运行 AFAIK 的唯一方法。
— 心理学家，
38

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

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

— 菲德尔
source
36

将以下代码添加到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;
}
— Shubham Kumar
source
8

使用标签@import

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

除了上述答案外，还请考虑访问此网站； 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;
}
— 马可·詹
source
1
这也使您可以font-weight: 400先加载相同字体的代码，然后再加载不带参数的字体，然后再加载其余字体。这样可以加快显示速度，如果您最终不需要整个字体，那么可以使用较小的CSS文件。
— moto
3 
<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>
— 罗汉VTK
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.