---
title: "Webフォント入りHTMLを崩さず共有する方法"
description: "手元できれいに見えたのに相手の画面でフォントが置き換わってレイアウトが崩れた方向け。Webフォントの読み込み方法による崩れの原因と、崩さずに共有するための構成の考え方を確認できます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/share-html-with-fonts"
markdown: "https://giga-site.com/articles/share-html-with-fonts/index.md"
category: "ハウツー"
publishedAt: "2026-06-21"
updatedAt: "2026-06-25"
readingMinutes: 7
---
# Webフォント入りHTMLを崩さず共有する方法
「自分のPCではきれいに見えるのに、相手に渡したらフォントが置き換わってレイアウトが崩れた」という相談はよくあります。原因はフォントの読み込み方法にあることがほとんどです。この記事では、Webフォント入りHTMLを崩さず共有するための考え方と、実際に共有URLとして渡すまでの手順をまとめます。
> Source HTML: https://giga-site.com/articles/share-html-with-fonts
> Article index: https://giga-site.com/articles/index.md
## なぜ相手の画面だとフォントが崩れるのか
HTMLの見た目がフォントに依存していると、閲覧する人の環境によって表示が変わります。自分のPCにインストール済みのフォントを指定していると、同じフォントを持っていない相手の画面では別のフォントに置き換わり、行間や文字幅が変わってレイアウトまで崩れてしまいます。
とくに日本語フォントは文字数が多く、英数字フォントよりファイルサイズが大きいため、扱い方の違いがそのまま表示差として出やすい傾向があります。デザインの再現性を保ちたいなら、「相手の環境に何があるか」に頼らず、フォントそのものをHTML側で確実に届ける設計に切り替えるのが基本です。
- ローカル専用フォントを指定すると相手の画面で別フォントに置換される
- フォントが変わると行間や折り返しが変化してレイアウトが崩れる
- 日本語フォントはサイズが大きく扱い方の差が出やすい
## 崩さないための3つのフォント読み込み方法
Webフォントを崩さず届ける方法は、大きく3通りに整理できます。1つ目はGoogle FontsなどのCDNから読み込む方法で、HTMLの先頭で配信元を指定するだけで使えますが、閲覧時にインターネット接続が必要になります。2つ目はフォントファイルをHTMLと一緒に同梱し、相対パスで読み込む方法です。配布物にフォントが含まれるため、配信元が落ちても表示が安定します。
3つ目はCSSのなかにフォントデータを直接書き込む埋め込み方式で、ファイル1枚で完結する代わりにサイズが大きくなりがちです。どの方法を選ぶ場合でも共通して重要なのは、フォントの参照先がHTMLからきちんとたどれる状態になっているかどうかです。手元では開けても、相手に渡したときにパスがずれて読み込めなければ、結局フォントは適用されません。
- CDN読み込み: 記述は手軽だが閲覧時にネット接続が前提
- ファイル同梱+相対パス: 配信元に依存せず表示が安定する
- CSS埋め込み: 1ファイルで完結するがサイズが増える
## 最短手順：まずこの3ステップで完了
Webフォント入りHTMLを崩さず共有は、最初に全体像を押さえると迷いません。細かな設定に入る前に、ファイルを準備し、共有条件を決め、公開後に相手と同じURLで確認する流れを作ります。
手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- 1. 共有するHTML/ZIPを整理し、不要ファイルや秘密情報を除く
- 2. 認証方式、公開期限、差し替え有無を決めてURLを発行する
- 3. シークレットウィンドウとスマホで開き、相手への依頼文を添えて送る
## 配布前にチェックしておきたいポイント
共有して崩れる典型パターンは、フォントの参照パスのずれです。絶対パスやローカル固有のパスでフォントを指していると、別の場所に置いた瞬間に読み込めなくなります。HTMLからの相対パスで指定し、フォントファイルをフォルダごと一式で渡すのが安全です。CDNを使う場合は、オフライン環境の相手には届かない点も頭に入れておきましょう。
加えて、フォントには利用許諾があります。Webでの利用や再配布が認められているかは事前に確認が必要です。最後に、共有前に必ず自分以外の状態で表示を確かめる工程を入れてください。フォントがインストールされていない端末や別ブラウザで開くと、相手が見る画面に近い状態を確認できます。
- フォントは相対パスで指定し、ファイルごと一式で渡す
- CDN利用時はオフラインの相手に届かないことを想定する
- フォントのWeb利用・再配布の可否を許諾で確認する
- インストールされていない端末で表示を確認する
## ZIPでまとめて崩れを防ぐ
フォントファイルや画像、CSSが複数に分かれている場合は、HTMLと関連ファイルをフォルダ構成のままZIPにまとめておくと、参照関係を保ったまま受け渡せます。フォントだけ添付し忘れる、というありがちな事故も防げます。
ZIPにまとめる際は、HTMLから見たフォルダ構成を崩さないことが肝心です。相対パスはフォルダの位置関係を前提に書かれているため、階層がずれるとフォントや画像のリンクが切れます。元のフォルダをそのまま圧縮するイメージで用意すると安全です。
- HTML・CSS・フォント・画像をフォルダごとZIP化する
- フォルダの階層構造を変えずに圧縮する
- 必要なファイルが抜けていないか圧縮前に確認する
## ギガサイト便で崩さず共有する手順
ファイルを正しく用意できたら、あとは相手がそのまま開ける形で渡すだけです。ギガサイト便は、HTMLやフォント一式をまとめたZIPを認証付きの共有URLとして公開できるサービスで、サーバーの用意やデプロイ設定は要りません。フォントを同梱したまま渡せるため、配布先での置き換わりや崩れを抑えられます。
以下の手順で、用意したファイルを共有URLにできます。アップロード時にはセキュリティスキャンが走り、APIキーらしき文字列や外部スクリプト依存などの兆候があれば警告が出ます。内容を理解したうえで公開するかどうかを選べます。
1. HTML・CSS・フォント・画像をフォルダ構成のままZIPにまとめる
2. トップページにファイルをドロップして共有URLを発行する
3. 誰に見せるかに応じて、URLのみ・パスワード・メール・会社ドメインから認証方式を選ぶ
4. 公開期限を設定し、共有相手にURLを伝える
5. 表示崩れがあれば、同じURLのままファイルを差し替えて修正する
## 共有後の運用も身軽に
公開したあとにフォントの差し替えや微修正が発生しても、同じURLのままファイルを置き換えられるので、リンクを送り直す手間がありません。修正版を相手に再共有する負担が減り、確認のやり取りがスムーズになります。
閲覧範囲を絞りたい場合は認証方式で調整でき、公開期限を設けておけば期限切れで自動的に見られなくなります。アクセスログから閲覧状況を確認したり、URL末尾のスラッグを分かりやすく整えたりもできるので、フォントの再現性を保ったまま、共有後の管理まで含めて身軽に進められます。
## よくある質問
### Webフォントが相手の画面で別のフォントに変わるのはなぜですか
自分のPCにインストールされたフォントを指定していると、同じフォントを持たない相手の環境では代わりのフォントに置き換わるためです。フォントが変わると行間や折り返しも変化し、レイアウトが崩れて見えます。CDN読み込み・ファイル同梱・CSS埋め込みのいずれかで、フォント自体をHTML側から届ける設計にすると防げます。
### フォントファイルはHTMLと一緒に渡す必要がありますか
配信元のCDNを使わずに表示を安定させたい場合は、フォントファイルをHTMLと一式で渡すのが確実です。その際はHTMLからの相対パスで指定し、フォルダ構成を崩さないようにします。ZIPにまとめておくと参照関係を保ったまま受け渡せます。
### 共有した後にフォントを差し替えるとURLは変わりますか
ギガサイト便では同じURLのままファイルを差し替えられるため、修正してもリンクは変わりません。共有相手にURLを送り直す必要がなく、フォント修正や表示崩れの直しを反映しやすくなります。
### フォント入りHTMLを限られた人だけに見せることはできますか
できます。共有URLにはURLのみ・パスワード認証・メール認証・会社ドメイン認証といった方式を選べます。公開期限も設定でき、期限を過ぎると自動的に閲覧できなくなります。
### 最短で進める場合でも省略しないほうがよい確認は何ですか？
不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。
## 関連記事
- [スマホの写真入りHTMLを公開する方法](https://giga-site.com/articles/share-photo-html-from-phone/index.md)
- [動画を埋め込んだHTMLを共有する方法｜サーバー不要で相手に見せる手順](https://giga-site.com/articles/share-html-with-video/index.md)
- [パスワード保護した共有URLをQRで渡すときのパスワードの伝え方](https://giga-site.com/articles/qr-with-password-handover/index.md)
- [フォントを同梱して共有する方法](https://giga-site.com/articles/how-to-bundle-fonts-method/index.md)
- [フォントを同梱して共有するときの手順と注意点](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)
```json
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Webフォント入りHTMLを崩さず共有する方法",
"description": "手元できれいに見えたのに相手の画面でフォントが置き換わってレイアウトが崩れた方向け。Webフォントの読み込み方法による崩れの原因と、崩さずに共有するための構成の考え方を確認できます。",
"datePublished": "2026-06-21",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/share-html-with-fonts",
"url": "https://giga-site.com/articles/share-html-with-fonts",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "ハウツー",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "Webフォントが相手の画面で別のフォントに変わるのはなぜですか",
"acceptedAnswer": {
"@type": "Answer",
"text": "自分のPCにインストールされたフォントを指定していると、同じフォントを持たない相手の環境では代わりのフォントに置き換わるためです。フォントが変わると行間や折り返しも変化し、レイアウトが崩れて見えます。CDN読み込み・ファイル同梱・CSS埋め込みのいずれかで、フォント自体をHTML側から届ける設計にすると防げます。"
}
},
{
"@type": "Question",
"name": "フォントファイルはHTMLと一緒に渡す必要がありますか",
"acceptedAnswer": {
"@type": "Answer",
"text": "配信元のCDNを使わずに表示を安定させたい場合は、フォントファイルをHTMLと一式で渡すのが確実です。その際はHTMLからの相対パスで指定し、フォルダ構成を崩さないようにします。ZIPにまとめておくと参照関係を保ったまま受け渡せます。"
}
},
{
"@type": "Question",
"name": "共有した後にフォントを差し替えるとURLは変わりますか",
"acceptedAnswer": {
"@type": "Answer",
"text": "ギガサイト便では同じURLのままファイルを差し替えられるため、修正してもリンクは変わりません。共有相手にURLを送り直す必要がなく、フォント修正や表示崩れの直しを反映しやすくなります。"
}
},
{
"@type": "Question",
"name": "フォント入りHTMLを限られた人だけに見せることはできますか",
"acceptedAnswer": {
"@type": "Answer",
"text": "できます。共有URLにはURLのみ・パスワード認証・メール認証・会社ドメイン認証といった方式を選べます。公開期限も設定でき、期限を過ぎると自動的に閲覧できなくなります。"
}
},
{
"@type": "Question",
"name": "最短で進める場合でも省略しないほうがよい確認は何ですか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。"
}
}
]
}
```