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

使用 @import 方法：

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

显然，“Open Sans”（Open+Sans）是导入的字体。所以用你的替换它。如果字体名称有多个单词，则通过在每个单词之间添加 + 符号对其进行 URL 编码，就像我一样。

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

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

https://i.stack.imgur.com/2rmPS.png

---

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

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

---

下载字体 ttf/其他格式文件，然后简单地添加这个 CSS 代码示例：

@font-face { 字体系列：机器人常规； src: url('../font/Roboto-Regular.ttf'); } h2{ 字体系列：机器人常规； }

---

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

---

除了上述答案，还要考虑这个网站； https://google-webfonts-helper.herokuapp.com/fonts

主要优势：

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

其他优点：

选择你的字体

选择你的字符集

选择你的字体样式/重量

选择您的目标浏览器（现代首选）

你得到CSS片段（添加到你的css样式表）加上一个字体文件的压缩包，包含在你的项目文件夹中（比如css_fonts）

在文件'your_css_theme.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;  
 }

---

只需转到 https://fonts.google.com/ 添加字体，方法是单击 + 转到所选字体 > 嵌入 > @IMPORT > 复制 url 并将 .css 文件粘贴到正文标记上方。完成。

---

使用标签@import

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

---

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

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

---

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

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

从网站上写下您选择的字体名称，不包括括号。

例如，您选择 Lobster 作为您选择的字体，

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

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

例如

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

---

只需通过链接

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

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

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

---

自 2015 年以来，谷歌方面发生了一些变化。我很难找到它，所以想包括新方法：

在所需的字体页面上向下滚动，单击字体名称侧面的小加号图标，嵌入链接和其他选项将出现在网页右侧的“选定系列”对话框中。

---

我们可以在 css3 中轻松做到这一点。我们必须简单地使用@import 语句。以下视频很容易地描述了如何做到这一点。所以请继续注意。

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

---

转到 https://fonts.google.com/ 并选择所需的字体系列（您可以按名称搜索）：选择所需的变体（粗细、斜体等）：单击右上角的查看所选系列按钮：选择右侧面板上的@import 以获取代码：

---