Menu
I'm banging my head against the wall. My project is in React with Vite and tailwind CSS configured. Now I want to use Google fonts in tailwind CSS. It doesn't work for some reason. All the tutorials seem to make me think it should be easy, so I'm guessing my problem is somewhere very easy to fix with someone experienced. Thanks in advance!
index.css
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
inter: ["Inter", "sans-serif"],
}
},
},
plugins: [],
}
index.html
<!doctype html>
<html lang="en">
<head>
...
</head>
<body>
<div id="root"></div>
<script src="https://cdn.tailwindcss.com"></script>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from 'tailwindcss'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
css: {
postcss: {
plugins: [tailwindcss()],
},
}
})
postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
920
asked Mar 18 '26 09:03
I was having issues while setting google fonts in my project as well.
I want to share the complete steps, so that anyone who wishes to go with a step by step solution can find it useful.
I did the following steps from the very start:
A) Followed the official document for setting up Tailwind with React Vite
Here, I noticed that it automatically generated tailwind.config.js, vite.config.js and postcss.config.js with some pre-generated code.
I didn't touched vite.config.js and postcss.config.js at all as per the docs.
Then setup the tailwind.config.js file. Again from the document by basically copy/pasting code from the docs.
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
fontFamily: {
roboto: ["Roboto", "sans-serif"],
},
},
},
plugins: [],
};
B) Then copy the font from official google fonts website. In my case I was using Roboto font.
Then in the index.css file import the font on the top along with tailwind imports. (This is also mentioned in the document, however we have to place our fonts import at the very top for it to work).
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
D) Then finally, we need to restart our React App for these changes to reflect.
npm run dev
And the font-family finally applies successfully in the React Vite Project.
149
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
