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

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?

Hello @MatijaL

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

1 Like

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 :thinking: - can you find the @font-face in priv/static/assets/app.css?

1 Like

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>

image


image


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

6 Likes

Ironically, I forgot how to do this.

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

5 Likes