如何使用 Angular 6 添加 Google 字体库？答案

【问题标题】：How to add Google fonts library with angular 6?如何使用 Angular 6 添加 Google 字体库？
【发布时间】：2026-01-13 01:05:02
【问题描述】：

我在 Angular 项目的 styles.scss 文件中添加了 Google 字体链接。

@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700');

但它已经与 Angular CLI 命令ng serve 一起使用，但是，尝试构建命令ng build --prod --base-href 部署了该项目。然后注意到了问题。

问题是它“不适用于导入谷歌字体”。

我正在谷歌上研究这个问题。但我没有找到好的解决方案。

我想知道如何在 Angular 项目中应用 google 字体？

【问题讨论】：

我总是将这些链接在 index.html 的头部并且没有遇到问题？
如果您在index.html 文件的<header> 中添加链接，它应该可以工作。使用--base-href 构建时可能会出现 url 或路径引用错误
请为我举例？
你认为。在本地构建您的项目并运行它。，如何使用该命令ng build --prod --base-href
能否分享一下chrome开发者工具的网络标签截图，看看浏览器是否真的发送字体请求？

标签： angular angular6 google-font-api angular-builder

【解决方案1】：

这是在本地使用 2、4、5、6、7 等角的谷歌字体的最佳方法，首先下载谷歌字体，并将其放在 assets 文件夹中并按照你的要求。

在 angular.json 中调用 src/assets

"assets": [
    "src/assets"
 ],

在 css 文件中在顶部添加此字体

@font-face {
  font-family: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-Light.ttf) format("truetype");
  font-weight:300;
}

最后根据您的要求使用它，例如

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

【讨论】：

link google 选择你喜欢的字体的便捷小帮手。

【解决方案2】：

如果你想在你的 Angular 应用中包含你自己版本的来自谷歌的 Roboto 字体

npm install roboto-fontface

然后在您的 angular.json 文件中，在样式列表中添加字体文件像这样

"styles": [              
          "node_modules/roboto-fontface/css/roboto/roboto-fontface.css"
        ],

【讨论】：

或者放到styles.scss @import "~roboto-fontface/css/roboto/roboto-fontface.css";
这可以与任何 Google 字体一起使用吗？？

【解决方案3】：

试试这样的：

在index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>title</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">

</head>

<body>
    <app-root>
        Loading...
    </app-root>
</body>
</html>

【讨论】：

你是否按照上面的方式添加了？？
你的代码和我的代码一样，但有一点不同，那就是<base href="">。 '' 项目实施时项目不起作用
你可以删除基础并只使用简单的链接。它对我来说工作正常。