Custom fonts with tailwindcss-rails
02:05 29 Aug 2023

In a Rails 7 app with the tailwindcss-rails gem I'm trying to add some custom fonts.

  1. I have created the app/assets/fonts folder and added the .woff files.
  2. I have updated config/tailwind.config.js specifying the font to use
...
theme: {
    extend: {
      fontFamily: {
        sans: ['font', ...defaultTheme.fontFamily.sans],
      },
    },
  },
...
  1. I have updated app/assets/stylesheets/application.tailwind.css, importing the font
@font-face {
    font-family: "font";
    font-weight: bold;
    src: font-url("font.woff") format("woff");
}

@tailwind base;
@tailwind components;
@tailwind utilities;

Inspecting the rendered code, my tailwind-460c48e21c34697f1c9465bed5b183862eaf86c6.css looks like

@font-face{font-family:font;font-weight:400;src:font-url("/assets/font-bd33e45d79892555cff5f0452e65999105a249c9.woff") 

/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com*/*,... html{...font-family:font,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji; ...

But, when pages are rendered, system-ui is used.

I'm running the app through the following Procfile.dev

web: bin/rails server -b 0.0.0.0 -p 3000 --early-hints
css: bin/rails tailwindcss:watch

After booting it, the log looks like

css | Running...
web | Running...
web | => Booting Puma
web | => Rails 7.0.7.2 application starting in development
web | => Run `bin/rails server --help` for more startup options
web | Puma starting in single mode...
web | * Puma version: 6.3.1 (ruby 3.2.2-p53) ("Mugi No Toki Itaru")
web | *  Min threads: 5
web | *  Max threads: 5
web | *  Environment: development
web | *          PID: 18675
web | * Listening on http://0.0.0.0:3000
web | Use Ctrl-C to stop
css |
css | Rebuilding...
css |
css | Done in 498ms.

What am I missing here?

ruby-on-rails fonts tailwind-css