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

我正在使用CMS，我只能访问CSS文件。所以，我不能在文件的开头写任何东西。我想知道是否有办法从CSS文件中导入web字体？

使用标记@import

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

使用以下方法：

@导入url（'https://fonts.googleapis.com/css?family=Open+Sans&display=swap'）；

显然，“开放式SAN”（

Open+Sans

）是导入的字体。所以用你的来代替它。如果字体名称有多个单词，URL通过在每个单词之间添加

+

符号对其进行编码，就像我所做的那样

确保将

@import

放在CSS的最顶端，在任何规则之前

谷歌字体可以自动为您生成

@import

指令。选择字体后，单击旁边的

（+）

图标。在左下角，将出现一个标题为“1个选定族”的容器。单击它，它将展开。使用“自定义”选项卡选择选项，然后切换回“嵌入”，并单击“嵌入字体”下的“@import”。将

标记之间的CSS复制到样式表中

---

您还可以使用@font-face链接到URL。

CMS是否支持iFrame？您也可以在内容的顶部添加iframe。这可能会更慢-最好将其包含在CSS中。

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

---

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

在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;
}

---

我们可以在css3中轻松实现这一点。我们必须简单地使用@import语句。下面的视频简单介绍了如何做到这一点。所以，去吧，小心点

去

通过单击+添加字体

转到所选字体>嵌入>@IMPORT>复制url并粘贴到body标记上方的.css文件中

完成了

---

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

@font-face{font-family:roboto-regular；
src:url（'../font/Roboto Regular.ttf'）；}
氢{
字体系列：roboto常规字体；
}

JU通过链接

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

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

要选择字体，您可以访问以下链接：

在网站上填写您选择的字体名称，不包括括号

例如您当时选择龙虾作为字体

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

然后，您可以在整个HTML/CSS文件中将其作为字体系列使用

例如

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

请喜欢这个答案
<>代码> 同上面的答案一样，也要考虑这个站点；

主要优势：


允许您自行托管这些谷歌字体，以获得更好的响应时间

其他优点：


选择您的字体
选择你的角色集
选择您的字体样式/重量
选择您的目标浏览器（首选现代浏览器）
你会得到CSS片段（添加到你的CSS样式表中）加上一个字体文件的压缩包，包含在你的项目文件夹中（比如说CSS_字体）

在文件中添加您的主题

/* open-sans-regular - latin - modern browsers  */
@font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
   src: local(''),
        url('css_fonts/open-sans-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('css_fonts/open-sans-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

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

自2015年以来，谷歌方面发生了一些变化。。我发现很难将新方法包括在内：

向下滚动所需字体页面
单击字体名称一侧的小加号图标
嵌入链接和其他选项将出现在网页右侧的“选定家庭”对话框中
您应该避免使用@import，因为它将延迟加载包含的资源，直到获取文件为止。请看这里的详细答案：将@import行移到顶部解决了我的问题！非常感谢。谷歌为什么这么说？谷歌内部人士声称不做@import？这是一个过时的答案
@import
按顺序加载，最好避免：现在加载谷歌字体的首选（默认）方式是使用
。当你开始搜索引擎优化并开始使用谷歌PageSpeed insights优化页面速度时，你会后悔这一点。使用
并优化它的交付。你能详细说明为什么“最好不要使用”吗？我搜索这个问题是因为我想知道哪种方法被认为是最好的。我在internet explorer中遇到了@import问题。有时它只是不读。他明确表示，他不能在标题中使用标记。+1表示使用“链接”，因为它不会阻止其他外部文件的并行加载“导入”将阻止并行加载其他外部文件。通过使用@import，您可以使字体成为CSS样式的一部分，而不是HTML标记，这在语义上更为正确，并且您可以通过CSS交换站点上的字体。但正如Chuck评论的那样，似乎你需要一个轻微的速度打击。也许记录加载时间，然后根据具体情况决定。请注意，对于SVGs AFAIK。这还允许您先加载
font-weight:400
，然后使用不带参数的相同代码加载字体的其余部分。这样可以更快地显示，如果您不需要整个字体，还可以使用更小的CSS文件。我不建议使用
local
部分，因为ppl很少安装所需的字体，而且大多数情况下，它的不同版本来自其他地方。开发和调试也比较困难，尤其是如果您安装了字体，并且由于某些服务器故障或其他错误，可能会由于某些原因而错过字体无法为用户加载的功能。iFrame会导致所有内容的空间完全不同。我认为这行不通。
/* open-sans-regular - latin - modern browsers  */
@font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
   src: local(''),
        url('css_fonts/open-sans-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('css_fonts/open-sans-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

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