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
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.