Example
font family 属性にフォント名を指定する事でフォントが適応されます。
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
現在利用可能なフォントプロバイダーは以下の通りです。
また、独自のフォントを読み込む事も可能です。ダウンロードしたフォントファイルをpublic/ディレクトリ内に入れることで利用できるようになります(拡張子ttf,woff,woff2,eot,otfをサポートしています)