I have been searching around from different sources (including tailwindcss.com), but I really can't manage to use my desired font in my new Rails 8 application. Here is what I did:

downloaded the Quicksand-VariableFont_wght.ttf file from Google Fonts to the /app/assets/fonts folder

initialised the /app/assets/tailwind/application.css file with the following:

@import url("assets/fonts/Quicksand-VariableFont_wght.ttf"); @import "tailwindcss"; @theme { --font-quicksand: "Quicksand", sans-serif; }

and then used it in my application.html.erb:

<body class="font-quicksand"> This is my test abcdefq <div class="min-h-full"> <div id="application" class="font-quicksand container mx-auto mt-28 px-5 flex border-2 border-solid rounded-sm border-orange-400"> application

But even though Edge devtools show that the Quicksand font is requested for the DOM elements, Arial font is actually applied:

enter image description here

How can I actually reference my font file in this Rails8/Tailwindcss context ?

user1185081's user avatar

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.