Hi,

so, I’m using tailwind dependency to add TailwindCSS and it works just fine, but I have a problem with adding Inter font as I simply can’t make it work.

mix.exs

defp deps do
    [{:tailwind, "~> 0.1", runtime: Mix.env() == :dev}]
end

config.exs

# Configure esbuild (the version is required)
config :esbuild,
  version: "0.14.0",
  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__)}
  ]

# Configure TailwindCSS
config :tailwind, version: "3.2.4", default: [
  args: ~w(
    --config=tailwind.config.js
    --input=css/app.css
    --output=../priv/static/assets/app.css
  ),
  cd: Path.expand("../assets", __DIR__)
]

dev,exs

watchers: [
  tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
]

fonts.css

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

app.css

/* Import CSS Files */
@import "fonts.css";

/* Import TailwindCSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './js/**/*.js',
    '../lib/*_web/**/*.*ex',
    '../lib/*_web/templates/*.heex'
  ],
  theme: {
    extend: {
      fontFamily: {
        primary: ["'Inter'", ...defaultTheme.fontFamily.serif]
      }
    }
  },
  variants: {},
  plugins: []
};

and my fonts folder which contains inter-var.woff2 is inside assets folder /assets/fonts/inter-var.woff2. What am I doing wrong here? How to set it up properly?