Adding Inter font to Tailwind but it doesn't work, what am I doing wrong?

Hello @MatijaL

Your must place inter-var.woff2 under priv/static/fonts/. And in the line primary: ["'Inter'", ... the font name is quotated twice.

Thanks for helping me out here but it still doesn’t work. Fonts are not loaded in the browser Network tab, no error that they can’t be found or anything like that.

Hmm - can you find the @font-face in priv/static/assets/app.css?

Appropriately mark the folders in priv/static/ directory as external assets:

--external:/fonts/* --external:/images/*

Those are called external assets, because they are not directly part of the source, like css and javascript. And hence they are placed inside priv/static folder.

You place your fonts inside: priv/static/fonts folder. See: Docs on Images, Fonts & External Files

config.exs

config :esbuild,
  version: "0.14.41",
  default: [
    args:
      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

app.css

@import "fonts.css";

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* This file is for your main application CSS */

fonts.css

@font-face {
    font-family: 'Signature';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    src: url("/fonts/signature.woff2") format("woff2-variations");
}

tailwind.config.js

  theme: {
    extend: {
      fontFamily: {
        primary: ["'Signature'", ...defaultTheme.fontFamily.serif]
      },
      colors: {
        brand: "#FD4F00",
      }
    },
  },

home.html.heex

<p class="text-8xl font-primary mt-4 font-semibold leading-10 tracking-tighter text-zinc-900">
      Peace of mind from prototype to production.
</p>

image457×266 12.7 KB

image629×322 35.5 KB

P.S. Don’t forget to use the font in your code. Like font-primary in class list.

Ironically, I forgot how to do this.

And after a ton of Googling, I came across my own answer.