---
title: "フォントを同梱して共有する方法"
description: "HTMLプレビューにフォントを同梱して、どの環境でも同じタイポグラフィで共有したいWeb制作者向け。フォントの埋め込み方法と注意点を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/how-to-bundle-fonts-method"
markdown: "https://giga-site.com/articles/how-to-bundle-fonts-method/index.md"
category: "ハウツー"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# フォントを同梱して共有する方法

Webページを外部に共有する際、フォントをGoogleフォントやAdobe Fontsなどの外部CDNに頼ったままにすると、受け取った相手の環境やネットワーク状況によって意図したフォントで表示されないことがあります。フォントを同梱する方法を取ることで、どの環境でも制作意図通りのタイポグラフィをレビューしてもらえます。

> Source HTML: https://giga-site.com/articles/how-to-bundle-fonts-method
> Article index: https://giga-site.com/articles/index.md

## 準備するもの

まず使用フォントのライセンスを確認します。GoogleフォントはOFLライセンスで埋め込み・配布が許可されていますが、Adobe FontsやWebフォントサービスのサブセットによっては静的ファイルとしての再配布が禁止されているものがあります。ライセンス違反にならない範囲でファイルを用意することが前提です。

フォントの取得方法を決めます。Googleフォントを使っている場合は、フォントのWEBページから「Download family」でTTFファイルをダウンロードし、`fontsquirrel.com/tools/webfont-generator`でWOFF2形式に変換するのが一般的です。WOFF2はファイルサイズがTTFの約30〜40%に圧縮されるため、HTMLと一緒に配布するのに適しています。

フォントファイルを置くフォルダ構成を決めます。慣例として`fonts/`フォルダをHTMLと同階層に作り、`fonts/NotoSansJP-Regular.woff2`のように配置するのが管理しやすいです。フォントファイル名にスペースを含めると一部の環境でパス解決に失敗するため、ハイフンまたはアンダーバーを使ってください。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## 実際の手順

手順①：WOFF2形式のフォントファイルを`fonts/`フォルダに配置します。手順②：CSSに以下を追記します。`@font-face{font-family:'NotoSansJP';src:url('../fonts/NotoSansJP-Regular.woff2') format('woff2');font-weight:400;font-display:swap;}`。手順③：body要素などに`font-family:'NotoSansJP',sans-serif;`を指定します。

手順④：HTMLをブラウザで開き（ローカルファイルまたはサーバー経由で）、意図したフォントが適用されているかを確認します。確認方法は開発者ツールの「Elements」タブでテキスト要素を選択し、「Computed」パネルの`font-family`に指定したフォント名が表示されているかを見ます。

手順⑤：フォントが適用されていることを確認したら、HTMLと`fonts/`フォルダをまとめてZIPに圧縮するか、ギガサイト便にフォルダごとアップロードします。フォントが参照できない環境での動作確認として、フォントフォルダを一時的に削除して代替フォントに自然に切り替わるかも確認しておくと安心です。

## 失敗しやすい点

最もよくある失敗は、CSSのurl()パスが間違っているケースです。CSSファイルの場所からの相対パスで記述する必要があるため、CSSが`css/style.css`にあり、フォントが`fonts/`にある場合は`url('../fonts/NotoSansJP.woff2')`が正しくなります。HTMLからの相対パスと混同するミスが頻発します。

ウェイト（太さ）が複数あるフォントを使っている場合、`@font-face`の`font-weight`の指定を省略またはすべて400にしてしまうと、boldや700指定の要素でブラウザが別フォントへフォールバックします。使用する各ウェイトのWOFF2ファイルを用意し、対応する`@font-face`ブロックをそれぞれ記述してください。

## テンプレ文面

「デザイン確認用のプレビューURLをご共有します。フォントはページ内に同梱しているため、特別なフォントのインストールなしにデザイン意図通りの表示でご確認いただけます。ご不明な点がございましたらお気軽にご連絡ください。」

フォントを同梱している旨をクライアントに伝えることで、「自分のPCには入っていないフォントで表示されている」という混乱を防げます。制作者側の配慮として一文添えるだけでレビューの品質が上がります。

## よくある質問

### 日本語フォントはファイルサイズが大きいですが、同梱してもページ表示速度に影響しませんか？

フルセットの日本語WOFFは5〜20MBになりますが、サブセット化（使用文字のみ抽出）すると200〜500KB程度に削減できます。Googleフォントは自動サブセット化されますが、ローカルWOFF2を使う場合はPyftsubsetやglyphhanger等でサブセット化することをおすすめします。

### フォントをHTMLにBase64でインラインに埋め込む方法もありますか？

可能ですが、フォントの内容をBase64文字列にするとHTMLファイルサイズが大幅に増加し、初期レンダリングが遅くなります。別ファイルとして配置してHTTPキャッシュを活かす方法の方が、ほとんどのケースでパフォーマンスが優れます。

### フォントを同梱した状態でZIP圧縮してメールに添付する方法と、URL共有はどちらがよいですか？

URLで共有する方が、修正版の差し替えが容易でメールサイズ制限も気にしなくて済みます。ただしオフライン環境のクライアントへはZIP添付の方が確実です。通常のプレビュー確認はURL共有、最終納品物の保存用にZIP添付という使い分けが一般的です。

## 関連記事

- [フォントを同梱して共有するときの手順と注意点](https://giga-site.com/articles/how-to-bundle-fonts-steps-note/index.md)
- [フォントを同梱して共有するためのチェックリスト](https://giga-site.com/articles/how-to-bundle-fonts-checklist/index.md)
- [レビュー用URLをSlackで配る方法](https://giga-site.com/articles/how-to-slack-distribute-method/index.md)
- [レビュー用URLをTeamsで配る方法](https://giga-site.com/articles/how-to-teams-distribute-method/index.md)
- [メールで期限付きURLを送る方法](https://giga-site.com/articles/how-to-email-expiry-url-method/index.md)
- [Notionに共有URLを貼る方法](https://giga-site.com/articles/how-to-notion-embed-url-method/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "フォントを同梱して共有する方法",
  "description": "HTMLプレビューにフォントを同梱して、どの環境でも同じタイポグラフィで共有したいWeb制作者向け。フォントの埋め込み方法と注意点を解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/how-to-bundle-fonts-method",
  "url": "https://giga-site.com/articles/how-to-bundle-fonts-method",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "ハウツー",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "日本語フォントはファイルサイズが大きいですが、同梱してもページ表示速度に影響しませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "フルセットの日本語WOFFは5〜20MBになりますが、サブセット化（使用文字のみ抽出）すると200〜500KB程度に削減できます。Googleフォントは自動サブセット化されますが、ローカルWOFF2を使う場合はPyftsubsetやglyphhanger等でサブセット化することをおすすめします。"
      }
    },
    {
      "@type": "Question",
      "name": "フォントをHTMLにBase64でインラインに埋め込む方法もありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "可能ですが、フォントの内容をBase64文字列にするとHTMLファイルサイズが大幅に増加し、初期レンダリングが遅くなります。別ファイルとして配置してHTTPキャッシュを活かす方法の方が、ほとんどのケースでパフォーマンスが優れます。"
      }
    },
    {
      "@type": "Question",
      "name": "フォントを同梱した状態でZIP圧縮してメールに添付する方法と、URL共有はどちらがよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "URLで共有する方が、修正版の差し替えが容易でメールサイズ制限も気にしなくて済みます。ただしオフライン環境のクライアントへはZIP添付の方が確実です。通常のプレビュー確認はURL共有、最終納品物の保存用にZIP添付という使い分けが一般的です。"
      }
    }
  ]
}
```