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

Question

我正在尝试将Google字体添加到我的Rails 5.2应用程序中，但我无法弄清楚为什么它不起作用/缺少什么：

我在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之前，我尝试在application.html.erb的头部添加以下行：

@import

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

非常感谢您的任何帮助！

- Agata

---

字体族：'Lato'，无衬线字体！important; 它能完成工作，但是否有更好的解决方法呢？ - Agata

在运行和查看您的应用程序时，您能否检查控制台是否存在可能的错误？ - ekremkaraca

没有控制台错误。 - Agata

Answer 1

似乎在application.scss的第一行中，有一个冒号（在url（' 之后，在//fonts之前），导致了错误。删除它即可解决问题：

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

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

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

- ekremkaraca

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 中添加该内部引入：

• import "@fontsource/roboto";

现在您应该能够在样式表中使用该字体。 对于任何其他附加的开源字体，请重复相同的步骤。

- nakakapagpabagabag