Chapter 19無料公開

フォントの指定と外部ファイルの読み込み

超Lチカ団編集局
超Lチカ団編集局
2024.01.08に更新

フォントの指定と外部ファイルの読み込み

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> タグ内でフォントを指定します。

image.png

なお 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>

結果:
image.png

どうしても text-h1font-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>

結果:

image.png

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>

結果:
image.png

yarn dev は起動し直す必要があります。