将 google 字体添加到 Rails 应用程序

Question

我正在尝试将 google 字体添加到我的 Rails 5.2 应用程序中，但我不明白为什么 work/what 没有丢失：

我在 application.scss 文件中添加了以下行：

@import url('://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap');

body {
  padding-top: 70px;
  font-family: 'Lato', sans-serif;
}

在 application.scss 中使用 @import 之前，我尝试在 application.html.erb 中添加以下行

<link href="https://fonts.googleapis.com/css?family=Lato:400,700,900&display=swap" rel="stylesheet">

感谢您的帮助！

Answer 1

application.scss 的第一行似乎有一个冒号（[=11= 之前]，url(' 之后）导致错误。删除此修复它：

@import url('//fonts.googleapis.com/css?family=Lato:400,700,900&display=swap');

body {
  padding-top: 70px;
  font-family: 'Lato', sans-serif;
}

无需在您的应用程序中添加额外的行，因为它会在您的 scss 文件中编译。

Answer 2

另一种方法是在应用程序中托管字体，以稍微提高性能。我已经在 Rails 6 应用程序上尝试了以下步骤：

1. 从以下位置查找开源字体：https://fontsource.org/fonts

• 对于此示例，让我们使用 roboto：https://fontsource.org/fonts/roboto

2. 根据您使用的包管理器，执行以下任一操作：

• yarn add @fontsource/roboto 或 npm install @fontsource/roboto

3. 在 app/javascript/packs/application.js 中添加这个内部导入：

• 导入“@fontsource/roboto”；

您现在应该可以在样式表中使用该字体了。对任何其他额外的开源字体重复相同的步骤。