@font-faceルールとWebフォントサービスで.otfフォントを使う

2024-04-02

Webブラウザで .otf フォントを使用する

概要

@font-face ルールは、CSS でフォントファイルを指定し、Webページでどのように表示するかを設定するために使用します。Webフォントサービス は、.otf フォントファイルをアップロードし、Webサイトで利用できるようにするためのサービスです。

手順

.otf フォントファイルの準備

使用する .otf フォントファイルを準備します。

自分で作成する
フォント販売サイトから購入する
オープンソースのフォントを利用する

Webフォントサービスへのアップロード

選んだ Webフォントサービスに .otf フォントファイルをアップロードします。

CSS コードの作成

以下のコードを参考に、@font-face ルールを作成します。

@font-face {
  font-family: 'MyFont';
  src: url('https://example.com/fonts/myfont.woff2') format('woff2'),
       url('https://example.com/fonts/myfont.woff') format('woff'),
       url('https://example.com/fonts/myfont.ttf') format('truetype');
}

body {
  font-family: 'MyFont', sans-serif;
}

font-family: 使用するフォントの名前
src: フォントファイルのURL
format: フォントファイルのフォーマット
font-family: HTML 要素に適用するフォント

HTML コードへの適用

以下のコードを参考に、HTML コードに font-family 属性を追加します。

<p>This is a paragraph with MyFont.</p>

ポイント

.otf フォントファイルは、Webフォントサービスにアップロードする必要があります。
@font-face ルールでは、複数のフォントファイル形式を指定することをおすすめします。
すべてのブラウザが .otf フォントファイルをサポートしているわけではないので、代替フォントも指定することをおすすめします。

注意事項

Webフォントサービスによっては、無料プランでは利用できるフォント数や機能が制限されている場合があります。
.otf フォントファイルは、著作権で保護されている場合があります。利用前にライセンスを確認してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルコード</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <p>これはサンプルです。</p>
  <p class="my-font">これは MyFont というフォントを使用したサンプルです。</p>
</body>
</html>

@font-face {
  font-family: 'MyFont';
  src: url('https://example.com/fonts/myfont.woff2') format('woff2'),
       url('https://example.com/fonts/myfont.woff') format('woff'),
       url('https://example.com/fonts/myfont.ttf') format('truetype');
}

.my-font {
  font-family: 'MyFont', sans-serif;
}

説明

HTML コードでは、class="my-font" 属性を追加することで、.my-font クラスに MyFont フォントを適用しています。
CSS コードでは、@font-face ルールを使って、MyFont フォントファイルの URL とフォーマットを指定しています。
font-family プロパティを使って、MyFont フォントを .my-font クラスに適用しています。

実行結果

上記のコードを実行すると、ブラウザで .otf フォントが表示されます。

注意事項

上記のコードはサンプルです。実際の使用環境に合わせて変更してください。

Webブラウザで .otf フォントを使用する他の方法

フォントファイルを直接アップロードする

Webサーバーに .otf フォントファイルを直接アップロードし、CSS コードで URL を指定する方法です。

メリット

Webフォントサービスを利用する必要がない

フォントファイルの管理が煩雑になる
セキュリティ対策が必要になる

手順

以下のコードを参考に、CSS コードでフォントファイルの URL を指定する

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.otf') format('opentype');
}

body {
  font-family: 'MyFont', sans-serif;
}

Base64 エンコードを使用する

.otf フォントファイルを Base64 エンコードし、CSS コードに直接埋め込む方法です。

ファイルサイズが大きくなる
古いブラウザでは対応していない

.otf フォントファイルを Base64 エンコードする
以下のコードを参考に、CSS コードに Base64 エンコードされたフォントデータを埋め込む

@font-face {
  font-family: 'MyFont';
  src: url('data:application/font-otf;base64,AAABAAIAAAABAAIA...');
}

body {
  font-family: 'MyFont', sans-serif;
}

Webフォント変換ツールを使用する

.otf フォントファイルを Webフォント形式に変換するツールを使用する方法です。

簡単に Webフォントを作成できる

ツールによっては有料のものもある

Webフォント変換ツールを使って、.otf フォントファイルを Webフォント形式に変換する

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2'),
       url('/fonts/myfont.woff') format('woff');
}

body {
  font-family: 'MyFont', sans-serif;
}