TTFフォントでWebデザインをレベルアップ！デザイナー必見のテクニック

2024-06-30

HTMLとCSSでTTFフォントを読み込む方法

手順:

フォントファイルを準備する: 使用するTTFフォントファイルをダウンロードします。フォントによっては、商用利用の可否などのライセンス規約があることに注意してください。
フォントファイルをWebサーバーにアップロードする: ダウンロードしたフォントファイルを、Webサーバーのフォントディレクトリにアップロードします。フォントディレクトリがない場合は、新しく作成する必要があります。
CSSで@font-faceルールを定義する: 以下の例のように、CSSファイルに@font-faceルールを定義します。

@font-face {
  font-family: 'MyFont'; /* フォントファミリー名 */
  src: url('fonts/MyFont.ttf') format('truetype'); /* フォントファイルのパスと形式 */
}

この例では、MyFont.ttf という名前のフォントファイルを fonts ディレクトリに置き、そのフォントファミリー名を MyFont としています。

HTMLでフォントを使用する: font-family プロパティを使用して、HTML要素にフォントを適用します。

<p style="font-family: MyFont;">本文</p>

上記の例では、<p> 要素に MyFont フォントが適用されます。

補足:

上記の例は基本的なものです。フォントのスタイル (太字、斜体など) や、フォントの読み込み方法 (ローカルフォントの利用など) を指定するオプションもたくさんあります。詳細は、CSSの @font-face ルールのドキュメントを参照してください。
WOFFやWOFF2などの形式でフォントファイルを準備すると、読み込み速度が向上することがあります。
Google FontsなどのWebフォントサービスを利用するのも良い方法です。これらのサービスでは、様々なフォントを無料で利用することができます。

HTML:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>TTFフォントの例</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p style="font-family: MyFont;">本文</p>
  <p style="font-family: MyFont; font-weight: bold;">太字の本文</p>
  <p style="font-family: MyFont; font-style: italic;">斜体の本文</p>
</body>
</html>

CSS:

@font-face {
  font-family: 'MyFont';
  src: url('fonts/MyFont.ttf') format('truetype');
}

このコードを実行すると、すべての段落 (<p>) 要素に MyFont フォントが適用されます。2番目の段落は太字 (font-weight: bold;)、3番目の段落は斜体 (font-style: italic;) で表示されます。

説明:

HTMLファイルでは、<link> タグを使用して style.css ファイルを読み込んでいます。
<p> 要素の style 属性を使用して、font-family プロパティに MyFont を指定しています。オプションで、font-weight や font-style などのプロパティを追加して、フォントのスタイルを指定することができます。
CSSファイルでは、@font-face ルールを使用して MyFont フォントを定義しています。このルールの中で、フォントファイルの場所 (url('fonts/MyFont.ttf')) と形式 (format('truetype')) を指定しています。

このサンプルコードを参考に、様々なフォントを試してみてください。

TTFフォントを読み込むその他の方法

Webフォントサービスを利用する

Google FontsなどのWebフォントサービスを利用すると、様々なフォントを無料で利用することができます。これらのサービスは、フォントファイルのアップロードや管理が不要で、簡単にフォントを使用することができます。

@font-faceルールをCSSフレームワークで利用する

BootstrapなどのCSSフレームワークには、@font-face ルールを簡単に利用するための機能が用意されている場合があります。フレームワークが提供するユーティリティクラスを使用することで、コードをより簡潔に書くことができます。

JavaScriptライブラリを使用する

Webフォントの読み込みをより柔軟に制御したい場合は、Font AwesomeなどのJavaScriptライブラリを使用することができます。これらのライブラリは、フォントの読み込みタイミングや、フォントのバリエーションの切り替えなどを詳細に制御することができます。

各方法の比較:

方法	メリット	デメリット
`@font-face` ルール	シンプルでわかりやすい	手動でフォントファイルをアップロードする必要がある
Webフォントサービス	手軽に利用できる	すべてのフォントが利用できるわけではない
CSSフレームワーク	コードが簡潔になる	フレームワークに依存する
JavaScriptライブラリ	柔軟性が高い	複雑な設定が必要になる場合がある