Tailwindcss 4 Custom fonts issue

rubyonrails-talk
1

I can guaranty its a me issue on this, but I’ve added the followinf in my app/assets/tailwind/application.css

@import "tailwindcss";

@layer base {
  @font-face {
    font-family: "Brume";
    src: asset-url("Brume-Regular.woff2") format("woff2");
    font-display: swap;
  }
}

@theme {
  --font-brume: Brume;
}

And added the fonts folder into the assets folder like so app/assets/fonts. I ve then added to my config/initializers/assets.rb file:

Rails.application.config.assets.paths << Rails.root.join("app", "assets", "fonts")

I then restarted rails.

Unfortunately theres no change to the font, or not to what I want. Am I missing something? I’ve tried a few different ways including taking the @layer base line out.

Any ideas or help would be grateful.

Cheers

2

Changed

src: asset-url("Brume-Regular.woff2") format("woff2");

to

src: url("Brume-Regular.woff2") format("woff2");

This worked

3

Saw you already got it working, but thought I share this article on typograhpy for Rails (developers) anyway: Typography for Rails developers | Rails Designer :blush: Goes over how to add custom fonts (typefaces) and adds some extras.