无法使用 TailwindCSS 将 Roboto 字体添加到 Rails 6答案

【问题标题】：Unable to add Roboto font to Rails 6 using TailwindCSS无法使用 TailwindCSS 将 Roboto 字体添加到 Rails 6
【发布时间】：2020-05-18 03:09:30
【问题描述】：

目前我正在尝试在我的应用程序中使用 Roboto 来获得类似于 five thirty eight 的字体。但是，当我尝试编辑 Tailwind 的配置并重新启动服务器时，我看不到字体。

这是我用来加载从google fonts:获得的字体的链接

  <head>
    <title>ArtsyDecor</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all',  'data-turbolinks-track': 'reload' %>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
  </head>

然后我将 Roboto 字体添加到我的 rails 应用程序上的 tailwind.config.js。

module.exports = {
  theme: {
    fontFamily: {
      sans: '"Roboto"'
      display: ['"Roboto"', '"sans-serif"'],
      body: ['"Roboto"', '"sans-serif"'],
    },
    extend: {}
  },
  variants: {},
  plugins: []
}

但是当我重新启动服务器时，我没有看到 Roboto 是主要字体。似乎顺风配置正在某处被覆盖。

似乎出了什么问题？

【问题讨论】：

当我将字体导入移动到 tailwind.css 文件（包含基础、组件和实用程序导入）中时，它对我有用

标签： ruby-on-rails tailwind-css google-fonts

【解决方案1】：

尝试使用 NPM 而不是 CDN 将 Roboto 安装到您的项目中： yarn add typeface-roboto

【讨论】：

【解决方案2】：

我认为有一个错字。字体用单引号和双引号定义。仅使用单引号或双引号。

【讨论】：