フォントの指定と外部ファイルの読み込み
google fonts を使う場合
デフォルト(Robotoフォント)以外のフォントを追加するときは、webfontloader に読み込みの設定を追加します。以下は google font を使用する場合です。
import webFontLoader from 'webfontloader';
export default defineNuxtPlugin( nuxtApp => {
webFontLoader.load({
google: {
families: [
'Roboto:100,300,400,500,700,900',
'Lato:100,300,400,700,900',
'Rubik+Microbe:400',
'Patrick+Hand:400',
'Noto+Sans+JP:400,700'
],
},
})
});
nuxt3 で使う場合は、ファイル名は plugins/webfontloader.client.js
にします。
<template>
<v-container>
<p class="default-font">Roboto</p>
<p class="default-font">日本語はこんな感じ</p>
<p class="extra-font">Rubik Microbe</p>
<p class="extra-font2">Patrick Hand</p>
<p class="extra-font3">Lato</p>
<p class="extra-font4">日本語はこんな感じ</p>
</v-container>
</template>
<style>
.default-font {
font-size: xx-large;
}
.extra-font {
font-family: 'Rubik Microbe';
font-size: xx-large;
}
.extra-font2 {
font-family: 'Patrick Hand';
font-size: xx-large;
}
.extra-font3 {
font-family: 'Lato', sans-serif !important;
font-size: xx-large;
}
.extra-font4 {
font-family: 'Noto Sans JP', sans-serif !important;
font-size: xx-large;
}
</style>
<style>
タグ内でフォントを指定します。
なお text-h1
などを併用すると、フォントが上書きされます。
<template>
<v-container>
<p class="text-h1">Text H1</p>
<p class="text-6rem">Text 6rem</p>
</v-container>
</template>
<style>
.text-h1 {
font-family: 'Rubik Microbe';
}
.text-6rem {
font-size: 6rem;
font-family: 'Rubik Microbe';
}
</style>
結果:
どうしても text-h1
の font-family
を上書きしたければ !important
で上書きは可能です。
ダウンロードした font を使う場合
ここでは Pacifico-Regular.ttf
をダウンロードしたファイルとして例を挙げます。
vite + vuetify3 の場合
ダウンロードした /src/assets/fonts
以下にフォントのファイルを置きます。次に /src/assets/font.css
というファイルを作ります。
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('@/assets/fonts/Pacifico-Regular.ttf') format('truetype');
}
/src/main.js
で import します。
import './assets/font.css'
フォントを使いたい vue
ファイルの中の style
でフォントを指定します。
<template>
<v-container>
<p class="text-h1">Roboto</p>
<p class="custom-font">Pacifico</p>
</v-container>
</template>
<style>
.custom-font {
font-family: 'Pacifico';
font-size: 6rem;
}
</style>
結果:
yarn dev
は起動し直す必要があります。
nuxt3 + vuetify3 の場合
ダウンロードしたファイルを assets/fonts/Pacifico-Regular.ttf
に置きます。
assets/font.css
というファイルを作ります。
@font-face {
font-family: 'Pacifico';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('~/assets/fonts/Pacifico-Regular.ttf') format('truetype');
}
url
の指定方法が、公式のドキュメントだと ~assets/fonts/
となっているかもしれませんが、それだとエラーになります。
nuxt.config.ts
に追記します。
export default defineNuxtConfig({
css: [
...
'~/assets/fonts/font.css'
],
...
}
フォントを使いたい vue
ファイルの中の style
でフォントを指定します。
<template>
<v-container>
<p class="text-h1">Roboto</p>
<p class="custom-font">Pacifico</p>
</v-container>
</template>
<style>
.custom-font {
font-family: 'Pacifico';
font-size: 6rem;
}
</style>
結果:
yarn dev
は起動し直す必要があります。