フォントを同梱して共有する方法

準備するもの

まず使用フォントのライセンスを確認します。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には入っていないフォントで表示されている」という混乱を防げます。制作者側の配慮として一文添えるだけでレビューの品質が上がります。