【2025年最新版】Webフォントを自社サーバーで使う方法｜アップロード〜表示速度改善まで

Webサイトをデザインする際に「オリジナルの雰囲気を出したい」「読みやすさを改善したい」と考えたとき、多くの方が検討するのがWebフォントです。Google Fontsのような外部サービスを利用する方法も一般的ですが、企業案件やブランドサイトでは「自分で用意したフォントをサーバーにアップロードして使いたい」というニーズも増えています。ところが、実際にやろうとすると「どのフォント形式を用意すればいいの？」「CSSの書き方がよく分からない」「読み込みが遅くならない？」といった疑問や不安に直面しやすいのではないでしょうか。

この記事では、Webフォントをサーバーにアップロードして安全かつ快適に利用するための基礎知識から、実際のCSS実装手順、さらにパフォーマンス改善のテクニックやトラブル対策まで、段階的にわかりやすく解説していきます。特に商用利用時のライセンス確認や、サイト表示速度を落とさないための工夫は見落とされがちなポイントなので、しっかり押さえておきましょう。

これからWebフォントを導入しようとしている方はもちろん、「なんとなく設定しているけど正しいか不安…」という方にも役立つ内容になっています。

格安ドメイン取得サービス─ムームードメイン─

Webフォントをアップロードして使う前に知っておくべき基礎知識

Webフォントをサーバーにアップロードして使用する前に、まずは基本的な知識を押さえておきましょう。独自フォントの導入は、サイトのブランディングや視覚的な魅力を大幅に向上させる一方で、適切に実装しないとページの読み込み速度やユーザビリティに悪影響を与える可能性があります。

Webフォントの基礎知識と主なメリット・デメリット

Webフォントとは

Webフォントとは、ウェブサイトで使用するフォントデータをサーバーから読み込んで表示する技術です。ユーザーの環境にインストールされていないフォントでも、統一されたデザインで文字を表示できます。

なぜ独自フォントを使うのか？主なメリット

ブランディングの強化
Google Fontsなどの無料サービスでは表現できない、企業や個人のブランドイメージに合った独自性のあるタイポグラフィが実現できます。競合サイトとの差別化にも効果的です。

デザインの統一性
ユーザーの環境に関係なく、デザイナーが意図した通りのフォントで表示されるため、デザインの一貫性を保てます。

読みやすさの向上
用途に特化したフォント（例：長文向け、見出し向け、数字表示向けなど）を選択することで、コンテンツの可読性を最適化できます。

知っておくべきデメリットと注意点

ページ読み込み速度への影響
フォントファイルは通常数百KB〜数MBのサイズがあり、読み込みに時間がかかる場合があります。特にモバイル環境では注意が必要です。

ライセンス費用とリーガルリスク
商用フォントの多くは有料で、ウェブ使用には別途ライセンスが必要な場合があります。適切なライセンス確認を怠ると法的問題に発展する可能性があります。

フォールバックフォントの必要性
フォントの読み込みに失敗した場合に備えて、システムフォントでのフォールバック設定が必須です。

対応フォント形式（WOFF2, WOFF, TTF, EOT等）の違いと選び方

Webで使用できるフォント形式は複数ありますが、それぞれ特徴とブラウザサポートが異なります。

WOFF2（Web Open Font Format 2.0）【最推奨】

• 圧縮率: 最も高い圧縮率（従来比30%削減）
• ブラウザサポート: モダンブラウザ全般（Chrome 38+, Firefox 35+, Safari 10+, Edge 14+）
• 特徴: 現在最も推奨される形式で、ファイルサイズが小さく読み込み速度が速い

WOFF（Web Open Font Format）

• 圧縮率: TTFより約40%軽量
• ブラウザサポート: 広範囲（IE9+を含む）
• 特徴: WOFF2に対応していない古いブラウザ向けのフォールバック用

TTF/OTF（TrueType/OpenType Font）

• 圧縮率: 非圧縮のため最もファイルサイズが大きい
• ブラウザサポート: ほぼ全ブラウザ
• 特徴: 最終的なフォールバック用として使用

EOT（Embedded OpenType）

• 対象: Internet Explorer 8以前の古いIE専用
• 現在の推奨度: モダンWeb開発では不要

実践的な選び方とベストプラクティス

2025年現在の推奨組み合わせ

1. メイン: WOFF2（モダンブラウザ向け）
2. フォールバック1: WOFF（古いブラウザ向け）
3. フォールバック2: TTF（最終フォールバック）

この組み合わせにより、ほぼ全てのブラウザで適切にフォントが表示され、かつ読み込み速度も最適化されます。

商用フォントを安全に使うためのライセンス確認方法

独自フォントを使用する際に最も重要なのがライセンスの確認です。適切な確認を怠ると、法的トラブルに発展するリスクがあります。

フォントライセンスで確認すべき重要なポイント

ウェブフォント使用許可の有無
デスクトップ版の購入だけでは、ウェブでの使用が許可されていない場合があります。「Web Font License」や「@font-face使用可」などの記載を確認しましょう。

PV数や ドメイン数の制限
多くの商用ウェブフォントは、月間ページビュー数やドメイン数に応じて料金体系が設定されています。サイトの規模に適したライセンスを選択することが重要です。

サブセット化の可否
フォントを軽量化するため、使用しない文字を削除する「サブセット化」が許可されているかを確認してください。

具体的なライセンス確認手順

1. ライセンス文書の精読
フォント購入時に提供されるライセンス文書を必ず熟読し、ウェブ使用に関する条項を確認します。

2. 販売元への直接確認
不明な点がある場合は、フォントベンダーに直接問い合わせることを強く推奨します。メールでのやり取りは証拠として保存しておきましょう。

3. 使用実績の記録
どのサイトでどのフォントを使用しているかを記録し、ライセンス条件を満たしていることを定期的に確認します。

無料フォントを使用する際の注意点

無料フォントであっても、ライセンス確認は必須です。

• 個人利用のみ許可で商用利用不可の場合
• クレジット表記が必要な場合
• 再配布禁止（サーバーアップロードが制限される場合）

これらの条件を見落とすと、後々問題になる可能性があります。

安全にWebフォントを導入するためには、これらの基礎知識をしっかりと理解した上で、次のステップである実装作業に進むことが重要です。

【Hostinger】

サーバーへのWebフォント設置とCSS実装手順

ここからは実際にWebフォントをサーバーにアップロードし、CSSで実装する具体的な手順を解説します。初心者の方でも迷わず作業できるよう、ステップ・バイ・ステップで進めていきましょう。

サーバーにフォントファイルをアップロードする手順・おすすめディレクトリ構成例

推奨ディレクトリ構成

まずは、フォントファイルを配置する適切なディレクトリ構造を作成します。メンテナンス性と管理のしやすさを考慮した推奨構成は以下の通りです。

your-website/
├── css/
│   └── style.css
├── fonts/                    ← フォント専用ディレクトリを作成
│   ├── noto-sans/           ← フォントファミリごとにサブディレクトリ
│   │   ├── NotoSans-Regular.woff2
│   │   ├── NotoSans-Regular.woff
│   │   ├── NotoSans-Bold.woff2
│   │   └── NotoSans-Bold.woff
│   └── custom-font/
│       ├── CustomFont-Light.woff2
│       ├── CustomFont-Light.woff
│       └── CustomFont-Light.ttf
├── images/
├── js/
└── index.html

FTPソフトを使った具体的なアップロード手順

1. FTPソフトの準備 FileZilla、WinSCP、Cyberduckなど、使い慣れたFTPソフトを起動し、サーバーに接続します。

2. fontsディレクトリの作成

• サーバーのルートディレクトリ（通常はpublic_htmlやwwwフォルダ）にアクセス
• 右クリックで「新しいフォルダを作成」を選択
• フォルダ名を「fonts」として作成

3. フォントファミリごとのサブディレクトリ作成

• 作成したfontsディレクトリ内に、使用するフォントファミリ名でサブディレクトリを作成
• 例：noto-sans、roboto、custom-headingなど

4. フォントファイルのアップロード

• ローカルのフォントファイルを選択
• 対応するサブディレクトリにドラッグ&ドロップでアップロード
• 重要: ファイル名に日本語や特殊文字が含まれていないことを確認

アップロード時のチェックポイント

ファイル権限の設定
アップロード後、ファイルの権限が「644」（読み取り可能）に設定されているか確認してください。権限が適切でないと、ブラウザからアクセスできない場合があります。

ファイルサイズの確認
アップロード前後でファイルサイズが一致しているかを確認し、転送エラーがないことを確認してください。

CSSの@font-face記述方法とパス指定の正しい書き方

@font-faceの基本構文

@font-faceルールは、カスタムフォントを定義するためのCSSの仕組みです。基本的な構文は以下の通りです。

@font-face {
  font-family: 'カスタムフォント名';
  src: url('フォントファイルへのパス') format('フォーマット');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

相対パスでの記述例

CSSファイルから見た相対パスでフォントを指定する方法です。最も一般的で推奨される方法です。

/* style.cssがcss/ディレクトリにある場合の相対パス記述 */
@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/noto-sans/NotoSans-Regular.woff2') format('woff2'),
       url('../fonts/noto-sans/NotoSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('../fonts/noto-sans/NotoSans-Bold.woff2') format('woff2'),
       url('../fonts/noto-sans/NotoSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

絶対パスでの記述例

サーバールートからの絶対パスで指定する方法です。複数のCSSファイルから同じフォントを参照する場合に便利です。

/* サーバールートからの絶対パス記述 */
@font-face {
  font-family: 'Custom Heading';
  src: url('/fonts/custom-font/CustomFont-Light.woff2') format('woff2'),
       url('/fonts/custom-font/CustomFont-Light.woff') format('woff'),
       url('/fonts/custom-font/CustomFont-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

パス記述時の注意点

大文字小文字の区別
Linuxサーバーではファイル名の大文字小文字が区別されます。NotoSans.woff2とnotosans.woff2は別のファイルとして認識されるため、正確なファイル名を記述してください。

特殊文字の回避
ファイル名やディレクトリ名にスペース、日本語、特殊文字が含まれているとパスエラーの原因となります。英数字とハイフン、アンダースコアのみを使用することを強く推奨します。

複数ブラウザに対応させるためのCSS記述例（.woff2・.woff・.ttf対応）

モダンブラウザ対応のベストプラクティス

現在推奨される、幅広いブラウザに対応した@font-faceの記述例です。

@font-face {
  font-family: 'MyCustomFont';
  src: url('../fonts/my-font/MyCustomFont-Regular.woff2') format('woff2'),
       url('../fonts/my-font/MyCustomFont-Regular.woff') format('woff'),
       url('../fonts/my-font/MyCustomFont-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MyCustomFont';
  src: url('../fonts/my-font/MyCustomFont-Bold.woff2') format('woff2'),
       url('../fonts/my-font/MyCustomFont-Bold.woff') format('woff'),
       url('../fonts/my-font/MyCustomFont-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MyCustomFont';
  src: url('../fonts/my-font/MyCustomFont-Italic.woff2') format('woff2'),
       url('../fonts/my-font/MyCustomFont-Italic.woff') format('woff'),
       url('../fonts/my-font/MyCustomFont-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

フォントファミリーの使用方法

定義したWebフォントをCSSで使用する際は、フォールバックフォントも必ず指定します。

/* 見出しに適用 */
h1, h2, h3 {
  font-family: 'MyCustomFont', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-weight: 700;
}

/* 本文に適用 */
body, p {
  font-family: 'MyCustomFont', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

/* イタリック体の使用例 */
.emphasis {
  font-family: 'MyCustomFont', 'Noto Sans JP', sans-serif;
  font-style: italic;
  font-weight: 400;
}

古いIEにも対応する場合の記述例

Internet Explorer 8以前にも対応する必要がある場合（現在は稀ですが）、EOT形式を含めた記述が必要です。

@font-face {
  font-family: 'MyCustomFont';
  src: url('../fonts/my-font/MyCustomFont-Regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/my-font/MyCustomFont-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/my-font/MyCustomFont-Regular.woff2') format('woff2'), /* Modern Browsers */
       url('../fonts/my-font/MyCustomFont-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('../fonts/my-font/MyCustomFont-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

format()指定の重要性

format()の指定により、ブラウザは対応していない形式のダウンロードをスキップできるため、パフォーマンス向上に寄与します。正確な形式名を指定することが重要です。

• WOFF2: format('woff2')
• WOFF: format('woff')
• TTF/OTF: format('truetype') または format('opentype')
• EOT: format('embedded-opentype')

この実装手順に従って作業を進めることで、確実にWebフォントをサイトに導入することができます。次は、パフォーマンス最適化とトラブル対策について詳しく見ていきましょう。

国内シェアNo.1のエックスサーバーが提供するVPSサーバー『XServer VPS』

パフォーマンス最適化とトラブル対策のベストプラクティス

Webフォントを導入する際に最も重要なのが、ページの読み込み速度とユーザビリティを維持することです。適切な最適化を行わないと、美しいタイポグラフィと引き換えにサイトの使いやすさを損なってしまう可能性があります。ここでは、実践的な最適化手法と、よくあるトラブルの解決策を詳しく解説します。

フォントサブセット化やWOFF2変換による軽量化手順

フォントが重くなる原因と解決アプローチ

一般的なフォントファイルには、数万文字の文字情報が含まれており、日本語フォントの場合は特にファイルサイズが大きくなりがちです。例えば：

• 欧文フォント: 50-200KB程度
• 日本語フォント: 1-10MB程度
• 中国語フォント: 5-20MB程度

このサイズ差の主な原因は収録文字数です。そのため、**使用する文字だけを抽出する「サブセット化」**が非常に効果的な軽量化手法となります。

サブセット化の実践手順

1. 使用文字の洗い出し
まず、サイトで実際に使用する文字を明確にします。

【基本的な日本語サブセット例】
- ひらがな・カタカナ
- 基本的な漢字（常用漢字約2,000字）
- 英数字・記号
- 特定の固有名詞で使用する漢字

【見出し専用フォントの場合】
- サイト内で使用する見出しテキストの文字のみ

2. 具体的なサブセット化ツール

pyftsubset（推奨） Googleが開発したPythonベースのツールで、最も高機能かつ無料です。

# インストール（Pythonが必要）
pip install fonttools

# 基本的な使用例
pyftsubset original-font.otf \\
  --unicodes=U+20-7E,U+3040-309F,U+30A0-30FF,U+4E00-9FAF \\
  --output-file=subset-font.woff2 \\
  --flavor=woff2

GitHub - fonttools/fonttools: A library to manipulate font files from Python.

A library to manipulate font files from Python. Contribute to fonttools/fonttools development by creating an account on GitHub.

github.com

サブセットフォントメーカー: https://opentype.jp/subsetfontmk.htm

• 日本語対応で初心者にも使いやすい

WOFF2変換による軽量化

サブセット化と併せて、WOFF2形式への変換も重要な軽量化手法です。

woff2_compressの使用例

# Google製のWOFF2コンバーター
git clone <https://github.com/google/woff2.git>
cd woff2
make clean all
./woff2_compress input.ttf

オンライン変換ツール

• Convertio: https://convertio.co/ja/ttf-woff2/
• CloudConvert: https://cloudconvert.com/ttf-to-woff2

軽量化の効果例

【軽量化前】
NotoSansCJK-Regular.otf: 15.2MB

【軽量化後】
サブセット化（常用漢字のみ）: 2.1MB （86%削減）
WOFF2変換: 850KB （94%削減）

font-display: swap;で読み込み時のチラつきを防ぐ！遅延読み込みの仕組み

FOUC（Flash of Unstyled Content）問題とは

Webフォントの読み込み中、ブラウザはフォールバックフォントで文字を表示するか、文字を非表示にします。この挙動の違いにより、ユーザーエクスペリエンスに大きな差が生まれます。

font-displayプロパティの各値と動作

swap（推奨設定）

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

• 即座にフォールバックフォントで表示
• Webフォント読み込み完了後に切り替え
• メリット: テキストが即座に読める、SEOに良い影響
• デメリット: フォント切り替え時にレイアウトシフトの可能性

block

font-display: block;

• 最大3秒間テキストを非表示
• その後フォールバックフォントで表示
• デザイン重視のサイトに適用

fallback

font-display: fallback;

• 100ms間テキストを非表示
• その後フォールバックフォントで表示
• 3秒以内にWebフォントが読み込まれれば切り替え

optional

font-display: optional;

• 100ms間テキストを非表示
• ネットワーク状況により、Webフォントを使用するか判断
• 通信速度の遅い環境では最初からフォールバックフォントを使用

実践的な実装例

/* 本文用フォント：読みやすさ優先 */
@font-face {
  font-family: 'BodyFont';
  src: url('../fonts/body-font.woff2') format('woff2');
  font-display: swap; /* すぐに読める */
}

/* 装飾用フォント：デザイン優先 */
@font-face {
  font-family: 'DecoFont';
  src: url('../fonts/deco-font.woff2') format('woff2');
  font-display: fallback; /* デザイン性も考慮 */
}

/* 見出し用フォント：バランス重視 */
@font-face {
  font-family: 'HeadingFont';
  src: url('../fonts/heading-font.woff2') format('woff2');
  font-display: optional; /* 環境に応じて最適化 */
}

レイアウトシフト対策

フォント切り替え時のレイアウトシフトを最小限に抑える方法：

/* フォールバックフォントとサイズ感を合わせる */
body {
  font-family: 'MyWebFont', 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  /* フォント読み込み前後でサイズ差を小さくする */
  font-size-adjust: 0.5;
}

フォントがうまく表示されない？よくあるトラブルとその解決策

パスが間違っている場合の診断と修正

症状: フォントが読み込まれず、フォールバックフォントで表示される

診断方法

ブラウザの開発者ツールを確認

Network タブで404エラーをチェック
Console タブでエラーメッセージを確認

パスの確認チェックリスト

/* ❌ 間違った例 */
@font-face {
  font-family: 'MyFont';
  src: url('fonts/myfont.woff2'); /* 相対パスが間違っている */
}

/* ✅ 正しい例（CSSファイルがcss/ディレクトリにある場合）*/
@font-face {
  font-family: 'MyFont';
  src: url('../fonts/myfont.woff2'); /* 正しい相対パス */
}

解決手順

1. ファイルが実際に存在するかFTPで確認
2. ファイル名の大文字小文字を正確にチェック
3. 特殊文字やスペースがないか確認

サーバー側設定の問題と解決法

MIME タイプの設定 サーバーがフォントファイルの正しいMIMEタイプを返していない場合があります。

.htaccessに追加する設定

# WOFF2
AddType font/woff2 .woff2
# WOFF
AddType font/woff .woff
AddType application/font-woff .woff
# TTF/OTF
AddType font/ttf .ttf
AddType font/otf .otf

CORS（Cross-Origin Resource Sharing）の問題 異なるドメインからフォントを読み込む場合に発生します。

# .htaccessでCORSを許可
<FilesMatch "\\.(woff2?|ttf|otf|eot)$">
  Header set Access-Control-Allow-Origin "*"
</FilesMatch>

キャッシュ問題の解決策

ブラウザキャッシュのクリア

/* クエリパラメータを追加してキャッシュを無効化 */
@font-face {
  font-family: 'MyFont';
  src: url('../fonts/myfont.woff2?v=1.1') format('woff2');
}

サーバー側キャッシュの設定

# フォントファイルの適切なキャッシュ設定
<FilesMatch "\\.(woff2?|ttf|otf|eot)$">
  ExpiresActive on
  ExpiresDefault "access plus 1 month"
</FilesMatch>

CSS記述ミスのチェックポイント

よくあるミス一覧

/* ❌ フォントファミリー名の不一致 */
@font-face {
  font-family: 'MyFont'; /* 定義 */
}
body {
  font-family: 'MyFonts'; /* ❌ 's'が余計 */
}

/* ❌ font-weightの不一致 */
@font-face {
  font-family: 'MyFont';
  font-weight: 400; /* ここで400と定義 */
}
h1 {
  font-family: 'MyFont';
  font-weight: 700; /* ❌ 700は定義されていない */
}

/* ✅ 正しい対応 */
@font-face {
  font-family: 'MyFont';
  font-weight: 700; /* 700も定義 */
}

デバッグ用のテストコード

フォントが正しく読み込まれているかテストするための簡単なHTML：

<!DOCTYPE html>
<html>
<head>
  <style>
    @font-face {
      font-family: 'TestFont';
      src: url('../fonts/test-font.woff2') format('woff2');
      font-display: swap;
    }
    .test {
      font-family: 'TestFont', monospace;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div class="test">ABCDEFGabcdefg12345</div>
  <div style="font-family: monospace; font-size: 24px;">ABCDEFGabcdefg12345</div>
</body>
</html>

この2行の文字が同じフォントで表示されていれば、カスタムフォントが読み込まれていない証拠です。

パフォーマンス監視ツールの活用

Google PageSpeed Insights

• フォントの読み込み時間を分析
• 改善提案を提供

PageSpeed Insights

pagespeed.web.dev

WebPageTest

• フォント読み込みのタイムラインを詳細分析
• ウォーターフォール表示で問題箇所を特定

Just a moment...

www.webpagetest.org

これらの最適化手法とトラブルシューティングを適用することで、美しいタイポグラフィと優れたパフォーマンスを両立したWebサイトを実現できます。

◆◇◆ 【衝撃価格】VPS512MBプラン！1時間1.3円【ConoHa】 ◆◇◆

よくある質問（FAQ）

Webフォントのアップロードと実装について、読者から寄せられることの多い質問をまとめました。実際の運用で迷いがちなポイントについて、具体的な解決策と共に回答します。

まとめ

Webフォントのアップロードと実装について、基礎知識から実践的な最適化手法まで詳しく解説してきました。独自性のあるタイポグラフィでサイトのブランディングを強化しつつ、パフォーマンスを維持するには、適切な知識と実装テクニックが欠かせません。

今回ご紹介した手法を実践することで、Google Fontsでは表現できない独自性のあるWebサイトを構築できます。特にサブセット化とWOFF2変換を組み合わせることで、美しいタイポグラフィとページ速度の両立が実現できるでしょう。

Webフォントの実装は一見複雑に見えますが、基本的な仕組みを理解すれば決して難しくありません。まずは小規模なテストページで基本的な@font-faceの記述を試し、徐々に最適化手法を取り入れていくことをおすすめします。

フォントはWebサイトの印象を大きく左右する重要な要素です。適切な実装により、ユーザーにとって読みやすく、ブランドイメージを効果的に伝えられるサイトを作り上げてください。技術的な課題を乗り越えた先には、他のサイトとは一線を画す魅力的なWebデザインが待っています。

通信無制限なのに工事不要！【SoftbankAir】