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