Elixir Phoenix & Tailwindcss custom fonts

Posted by Suyash Singh

on October 29, 2022

ElxirPhoenix

This is a very small guide on managing custom fonts with tailwindcss and elixir phoenix.

Step 1 — Place the fonts

There are several ways to achieve custom fonts along with tailwindcss. The easiest one involves copying our fonts to the priv directory. We will place our fonts inside the priv/static/fonts directory.

Step 2 — Update app.css

Inside the assets/css/app.css file add the @font-face block for the custom font. In this instance we are adding the font Abel…

@font-face {
  font-family: 'Abel';
  font-weight: 100 200 300 400 500 600 700 800 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url('../fonts/Abel/Abel.ttf') format('truetype');
}
...
assets/css/app.css

Step 3 — Update tailwind.config.js

Now, we need to instruct tailwind to use the font-family we defined above using the @font-face block in the app.css file…

theme: {
    extend: {
      fontFamily: {
      	...
        sans: ["Abel"],
        ...
      },
    },
  },
...
tailwind.config.js

Step 4 - Restart the server

$ mix phx.server

Congratulations! We have finally setup custom fonts in our elixir phoenix application using tailwind.