Google Fonts

Google Fonts module for Nuxt

Installation

npm i -D @nuxtjs/google-fonts

Setup

Add the following lines to the modules section of nuxt.config.{ts,js}

modules: ['@nuxtjs/google-fonts'],
googleFonts: {
  families: {
    Montserrat: true,
    Lato: [100, 900],
    'Protest Revolution': {
      wght: [100, 400],
      ital: [100]
    },
  }
},

Demo

Fonts.vue

<template>
  <p class="text-white font-['Montserrat']">
    Montserrat
  </p>
  <p class="text-white font-['Lato'] font-thin">
    Lato: 100
  </p>
  <p class="text-white font-['Lato'] font-black">
    Lato: 900
  </p>
  <p class="text-white font-['Protest_Revolution'] italic">
    Protest Revolution
  </p>
</template>

Montserrat

Lato: 100

Lato: 900

Protest Revolution