在 Angular 应用程序 (SCSS) 中导入的字体无法在其他设备上加载

Question

我在整个应用程序中使用了两种字体：Bebas Neue 和 Nunito。我在 app 目录的 styles.scss 文件中使用 @import 语句导入了这些字体。

@import url('https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nunito:700&display=swap');

然后单独使用它们 component.scss 和 font-family

element {
   font-family: "Bebas Neue";
}

其他字体也类似。

这在开发过程中非常有效。生产构建后，该应用程序仍能在我的设备上正确显示字体，但它们根本不会加载到其他设备上。 这可能看起来像是另一个问题的重复，但我找不到具体解决这个问题的方法。可能是什么问题？

Answer 1

尝试像这样使用它

将下面的代码复制粘贴到项目 src 目录中的 index.html 文件中，如下所示 <head> 标签

<link href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:700&display=swap" rel="stylesheet">

在 Angular 应用程序 (SCSS) 中导入的字体无法在其他设备上加载

Font imported in an Angular app (SCSS) does not load on other devices

angular

typescript

sass

cross-browser

google-webfonts