Webフォント一式を作成
TTF・OTF・WOFF・WOFF2のフォントを選び、WOFF2とCSS、確認用HTMLを作成します。Webサイトへ組み込む前に見本文字とCSSの名前・太さ・スタイル・読み込み中の表示を確認し、一式をZIPで保存できます。文字の絞り込みは行いません。
できること
Web用のファイルをまとめる
TTF・OTF・WOFF・WOFF2から、WOFF2とCSS、確認用HTMLを作ります。フォントを複数まとめて指定できます。
字形とCSSの条件を確認
変換したフォントの見た目を確認します。Webで使う名前・太さ・スタイルと、読み込み中の表示は必要に応じて変更できます。
ZIPでそのまま受け渡す
fontsフォルダー、fonts.css、preview.htmlを一式で保存します。ファイルの相対的な配置を保って利用できます。
使い方
フォントをまとめて選択
Webで利用できるフォントを選びます。複数使う場合は一度に指定してください。
見た目とWeb用の設定を確認
プレビューする文字を入力し、各フォントを確認します。名前や太さなどを調整する場合は、そのフォントのCSS設定を開きます。
一式を作成してZIPを保存
「Webフォント一式を作成」を押し、作成したwebfont-kit.zipを保存します。
展開してWebページへ組み込む
fontsフォルダーとfonts.css、preview.htmlの配置を保って展開します。使用するページでCSSを読み込み、指定したフォント名を使ってください。
こんなときに便利
Webサイトの公開準備
手持ちのフォントをWeb向けの形式とCSSにまとめ、組込みに必要なファイルをそろえます。
制作担当へ一式で渡す
通常体と太字体など複数のフォントをまとめ、確認用の文字を含むHTMLとともに渡します。
フォントとCSSのつながり
WOFF2はWebで使うフォント形式
元の文字を含めたWOFF2を用意します。文字の絞り込みは行いません。容量はフォントによって異なります。
名前・太さ・スタイルはCSSへの登録
Webでどの指定のときにこのフォントを使うかを決めます。フォントの字形を太字や斜体へ加工する設定ではありません。
同じ名前でも太さとスタイルで区別
通常体と太字体は同じ名前で使えますが、名前・太さ・スタイルの組合せを重複させることはできません。
読み込み中の表示を選ぶ
初期設定では代替フォントを先に表示し、準備ができたら切り替えます。必要ならCSS設定で待ち方や切り替え方を変えられます。
相対的な配置を保つ
fonts.cssからfonts/font-1.woff2などを参照します。フォルダーやCSSの置き場所を変える場合は、参照するパスも合わせて調整してください。
よくある質問
生成したファイルはどこへ配置しますか？
ZIPを展開し、fontsフォルダーとfonts.css、preview.htmlの関係を保って配置します。自分のページからfonts.cssを読み込み、指定したフォント名をCSSで使用してください。
形式変換だけの機能との違いは？
この画面はWOFF2に加えてCSSと確認用HTMLをまとめます。フォント形式だけを変えたい場合は「フォント形式変換」を使ってください。
使う文字だけに絞れますか？
この画面では文字の絞り込みを行いません。元の文字を保ったフォントを用意する用途です。
太さを変えると文字が太くなりますか？
設定するのはCSSで使う太さの値です。フォントファイルの字形を加工する機能ではありません。太字や斜体を使う場合は、その字形を持つファイルを用意してください。
同じフォント名で複数のファイルを使えますか？
太さまたはスタイルを変えて登録できます。同じ名前・太さ・スタイルの組合せが重なった場合は、該当する設定を見直してください。
フォントを選び直すとどうなりますか？
現在のフォント一式と作成済みZIPを取り除き、新しく選んだ一式を読み込みます。引き続き使うファイルも一緒に選んでください。
見本の文字をすべて表示できない場合は？
フォントに含まれていない文字は、別のフォントで表示されることがあります。表示できる文字と利用先での見た目を確認してください。
フォントを読み込めない場合は？
対応形式のフォントを選び直してください。一式の中に変換・読み込みできないファイルがある場合は、一部だけを成功結果として保存しません。
入力と結果
- 入力
- TTF・OTF・WOFF・WOFF2。複数をまとめて選択できます。
- 条件
- Webへの埋め込みを含め、入力フォントの利用条件を確認してください。
- 設定
- CSSで使う名前・太さ・スタイル・読み込み中の表示。
- 出力
- webfont-kit.zip。WOFF2、fonts.css、preview.htmlを含みます。