Webフォント入りHTMLを崩さず共有する方法

なぜ相手の画面だとフォントが崩れるのか

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末尾のスラッグを分かりやすく整えたりもできるので、フォントの再現性を保ったまま、共有後の管理まで含めて身軽に進められます。