csstailwind-cssfont-facetailwind-css-4

How to add an extra font to Tailwindcss?

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:

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

  2. initialized 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 shows 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?

Solution

  • wrong approach. @import url() is not how you load local fonts and Tailwind's @theme { --font-* } doesn't magically register a font.

    Path is fine - app/assets/fonts/Quicksand-VariableFont_wght.ttf

    in app/assets/tailwind/application.css

    @import "tailwindcss";

@font-face {
  font-family: "Quicksand";
  src: url("/assets/Quicksand-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@theme {
  --font-quicksand: "Quicksand", ui-sans-serif, system-ui, sans-serif;
}

    Now you can use ex: <body class="font-quicksand">