ローカルにインストールされたフォントをCSSにリンクする方法

@font-faceルールを使用する方法: @font-faceルールを使用すると、ローカルにインストールされたフォントをCSSにリンクすることができます。以下は、@font-faceルールの基本的な構文です。

@font-face {
  font-family: 'FontName';
  src: url('フォントファイルのパス');
}

上記のコード例では、フォントファイルのパスには、フォントファイルが格納されている場所のパスを指定します。たとえば、フォントファイルがCSSファイルと同じディレクトリにある場合は、単にファイル名を指定します。

@font-face {
  font-family: 'FontName';
  src: url('fontname.ttf');
}

相対パスを使用する方法: フォントファイルがCSSファイルと同じディレクトリにある場合、相対パスを使用してフォントをリンクすることもできます。以下は、相対パスを使用してフォントをリンクする方法の例です。

body {
  font-family: url('./fontname.ttf');
}

上記の例では、./は現在のディレクトリを指し、fontname.ttfはフォントファイルの名前です。

フォントディレクトリを作成する方法: フォントを個別のディレクトリに保存し、そのディレクトリへのパスを使用してフォントをリンクする方法もあります。以下は、この方法の例です。

@font-face {
  font-family: 'FontName';
  src: url('fonts/fontname.ttf');
}

上記の例では、fontsという名前のディレクトリを作成し、その中にフォントファイルを保存しています。フォントファイルへのパスは、fonts/fontname.ttfとなります。

これらは、ローカルにインストールされたフォントをCSSにリンクするためのいくつかの一般的な方法です。適切な方法を選択し、フォントファイルへのパスを正確に指定することで、フォントを正しく表示することができます。