tailwind use font from local files globally

Currently I'm doing this in my style tags

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

* {
  font-family: 'Roboto', sans-serif;
}

but I downloaded the Roboto font and would like to know how I can configure Tailwind to use those files and the font globally for all elements.

Sidenote:

I'm using Vuejs and followed the guide on how to setup Tailwind for Vue from here

https://www.youtube.com/watch?v=xJcvpuELcZo

Solution

You can customize Tailwind if it was installed as a dependency to your project using npm install tailwindcss

Steps:

copy the downloaded font and place it inside a fonts folder inside your project.
run npx tailwind init, to generate an empty tailwind.config.js
Inside tailwind.config.js add fontFamily inside extend and specify the font family to override (Tailwind's default family is sans). Place the newly added font family at the beginning (order matters)

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Roboto', 'Helvetica', 'Arial', 'sans-serif']
      }
    },
  },
  variants: {},
  plugins: []
}

Important: Using extend will add the newly specified font families without overriding Tailwind's entire font stack.

Then in the main tailwind.css file (where you import all of tailwind features), you can import your local font family. Like this:

@tailwind base;
@tailwind components;

@font-face {
  font-family: 'Roboto';
  src: local('Roboto'), url(./fonts/Roboto-Regular.ttf) format('ttf');
}

@tailwind utilities;

Now recompile the CSS. If you're following Tailwind's documentation, this is typically done using postcss:

postcss css/tailwind.css -o public/tailwind.css

If you're not using postcss, you can run:

npx tailwindcss build css/tailwind.css -o public/tailwind.css

Your newly added font family should now be rendered.