about uscontact

How to load google font in NuxtJS with TailwindCSS

Author: zemna
Date: April 17, 2021
Share this:

Learn how to load & use Google Fonts in NuxtJS project with TailwindCSS

Install @nuxtjs/google-fonts package

npm install @nuxtjs/google-fonts --save

Setup @nuxtjs/google-fonts to buildModules in nuxt.config.js

export default {
...

buildModules: [
"@nuxtjs/google-fonts"
],

googleFonts: {
display: "swap",
families: {
Inter: {
wght: [100, 200, 300, 400, 500, 600, 700, 800, 900]
}
}
},

...
}

Set default font in tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
purge: [
"./components/**/*.{vue,js}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}"
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
fontFamily: {
sans: ["Inter", ...defaultTheme.fontFamily.sans]
},
},
},
variants: {
extend: {}
},
};
Share this:

Leave a Reply

Your email address will not be published.

ZEMNA.NET

Professional software development agency estalished in Indonesia. We offers website setup, web application development, fulfillment service, and etc.
Follow us
Follow us to get latest news and tutorials.
2022 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
magnifiercrossmenu