Add custom fonts to Rails, Tailwind

Prepare

Download your font. Create a new folder in the 'public' folder named 'fonts' and place your font in it. It might look something like this: public/fonts/Broken.otf.

app/assets/stylesheets/application.tailwind.css

@layer components {
  @font-face {
    font-family: "Broken";
    src: url("/fonts/Broken.otf");
  }
}

config/tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
        broken: ['Broken', ...defaultTheme.fontFamily.sans]
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
  ]
}

In views

 <h1 class="font-bold text-7xl font-broken">Products</h1>

secretpray/Add custom fonts to Rails, Tailwind.md

Prepare