Nuxtにフォントを追加する方法

2024-02-17 06:02 Nuxt.js フォント CSS
  1. ローカルなフォントファイルを使用する方法: まず、Nuxt.jsのプロジェクト内にフォントファイルを追加します。一般的なフォントファイル形式は、.ttf（TrueTypeフォント）や.otf（OpenTypeフォント）です。以下は、フォントファイルをプロジェクト内の「static/fonts」ディレクトリに追加する例です。
static/fonts/your-font.ttf

次に、CSSファイルを作成し、フォントを指定します。例えば、以下のようになります。

@font-face {
  font-family: 'YourFont';
  src: url('/fonts/your-font.ttf') format('truetype');
}
body {
  font-family: 'YourFont', sans-serif;
}
  1. Google Fontsを使用する方法: Google Fontsは、Webフォントを提供する無料のサービスです。まず、Google Fontsのウェブサイト（https://fonts.google.com/）で使用したいフォントを検索し、選択します。選択したフォントには、埋め込み用のHTMLコードが提供されます。

Nuxt.jsのプロジェクト内のheadセクションに、以下のようにHTMLコードを追加します。

<head>
  <link href="https://fonts.googleapis.com/css2?family=YourFont" rel="stylesheet">
</head>

使用したい要素に対して、フォントファミリーを指定します。

<style>
  body {
    font-family: 'YourFont', sans-serif;
  }
</style>
  1. CSSフレームワークを使用する方法: Nuxt.jsは、一部のCSSフレームワークとの統合をサポートしています。例えば、Tailwind CSSやBootstrapなどです。これらのフレームワークには、フォントのスタイリングオプションが含まれている場合があります。

まず、Nuxt.jsプロジェクトにおいて選択したCSSフレームワークをインストールします。その後、フレームワークのドキュメントに従って、フォントの設定方法を調べます。

以上の方法のいずれかを選択して、Nuxt.jsプロジェクトにフォントを追加できます。特定の方法を選ぶ際には、プロジェクトの要件や好みに基づいて判断してください。