ウェブフォントジェネレーター

@font-face ウェブフォントジェネレーター

バリアブルフォント、WOFF2、CSSをワンクリックで

TTF、OTF、WOFF、またはWOFF2ファイル — バリアブルフォントを含む — をドロップし、設定を選択し、WOFF2、WOFF、完全なstylesheet.css、およびライブデモページを含むホスト可能なバンドルをダウンロードします。

ここにフォントをドロップするか、クリックして参照

TTF、OTF、WOFF、WOFF2、バリアブルフォント — 複数ファイルが許可されています

100% クライアントサイド

変換は完全にあなたのブラウザ内で WebAssembly を使用して実行されます。あなたのフォントはアップロードされません。

バリアブルフォントとすべてのフォーマット

TTF、OTF、WOFF、WOFF2を — 最適化されたWOFF2を出力し、完全なバリアブルフォント軸サポート（wght、wdth、slnt、ital）。

プロダクション準備完了の出力

正しいfont-display、オプションのlocal()、およびdemo.htmlを含むstylesheet.cssを送信し、バンドルをプロジェクトに直接ドロップできます。

ウェブフォントジェネレーターとは？

ウェブフォントジェネレーターは、デスクトップまたはダウンロードしたフォントファイル（TTF、OTF、WOFF、WOFF2 — 現代のバリアブルフォントを含む）を、ブラウザがウェブ上で読み込める形式に変換します — 主に今日のWOFF2、レガシーフォールバックとしてWOFFを使用し、マッチするCSS @font-face宣言を生成するので、ウェブサイトのタイポグラフィを自己ホストできます。

なぜフォントを自己ホストするのか？

自己ホスティングは、パフォーマンス、プライバシー、信頼性を完全に制御できます。Google Fontsへのサードパーティリクエストはなく（GDPRに役立ちます）、追加のDNSルックアップもなく、ファイルをプリロードでき、どのウェイト、スタイル、軸をサイトと共に送信するかを正確に決定できます。

変換はどのように機能するのか

WOFF2は、TTF/OTFのアウトラインをウェブ用に特別に設計されたBrotli圧縮コンテナにラップします — 通常はWOFFより30%小さく、元のTTFより50%以上小さくなります。WOFFは古いzlib圧縮ラッパーで、非常に古いブラウザ用のフォールバックとして保持されています。当社のジェネレーターは、WebAssemblyにコンパイルされたGoogleの公式WOFF2エンコーダーとデコーダーを実行するため、変換はブラウザ内でローカルに行われます。Google FontsからダウンロードしたWOFF2をドロップすると、透明にsfntコンテナにデコードされ、再エンコードされます — 元のTTFを探す必要はありません。

バンドルに含まれるもの

  • アップロードされた各フォントに対してWOFF2（オプションでWOFF/TTF）で提供される — バリアブルフォントも単一の小さなファイルとして保持されます。
  • ファイルごとに1つの@font-faceルール、正しいformat()ヒント、font-weight範囲、font-style、font-stretch、font-display、およびオプションのlocal()を含む完全なstylesheet.css。
  • ライブ前に複数のサイズで各ウェイト、スタイル、軸をプレビューできるdemo.htmlページ。
  • オプションの Base64 埋め込みにより、オフラインファーストまたはシングルファイルシナリオ用にフォントを CSS 内にインラインで出荷できます。

プライバシー & ライセンス

ファイルはあなたのデバイスを離れません — すべてがあなたのブラウザ内で処理されます。ウェブサイトに公開する前に、フォントのライセンスがウェブフォントの埋め込みを許可していることを常に確認してください。

よくある質問