Fonts

Web fonts are dynamically downloaded and used, using the Nuxt Fonts module internally.

On this page

Example

The font is applied by specifying the font name in the font family attribute.

SampleGoogleFonts
SampleBunnyFonts
SampleFontshare
SampleFontsource
Add your Fonts!
vue
<template>
  <div class="googleFonts">
    SampleGoogleFonts
  </div>
  <div class="bunnyFonts">
    SampleBunnyFonts
  </div>
  <div class="fontShare">
    SampleFontshare
  </div>
  <div class="fontSource">
    SampleFontsource
  </div>
  <div class="localFont">
    Add your Fonts!
  </div>
</template>

<style scoped>
.googleFonts{
  font-family: "Kiwi Maru",sans-serif;
}
.bunnyFonts{
  font-family: 'Acme', sans-serif;
}
.fontShare{
  font-family:'Clash Display',sans-serif;
}
.fontSource{
  font-family: 'Long Cang',sans-serif;
}
.localFont{
  font-family: 'sample',sans-serif;
}
</style>

Font providers

Currently available font providers include

You can also load your own fonts.Put the downloaded font file in the public/ directory to make it available(supporting ttf, woff, woff2, eot or otf extensions).

Documentation

Nuxt/Fonts