Custom fonts with tailwindcss-rails
In a Rails 7 app with the tailwindcss-rails gem I'm trying to add some custom fonts.
- I have created the
app/assets/fontsfolder and added the.wofffiles. - I have updated
config/tailwind.config.jsspecifying the font to use
...
theme: {
extend: {
fontFamily: {
sans: ['font', ...defaultTheme.fontFamily.sans],
},
},
},
...
- 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?