「TTF」からWEBフォント「EOT」「WOFF」「SVG」へ変換する方法


Web font collection / Impress PC

多くの場合、フォントは「TTF(TrueType Font)」で作成・配布されているでしょう。

この「TTF」さえあれば、WEBフォント「EOT」「WOFF」「SVG」へ変換することが可能です。

以下の無料のWEBサービスが、一括で変換できるので、とても便利です。

Create Your Own @font-face Kits | Font Squirrel
http://www.fontsquirrel.com/tools/webfont-generator

■「TTF」から変換する方法

Add Fonts」をクリックします。

6767

変換したいフォントを選択します。

ここでは8bitビットマップ風フリーフォント「PixelMplus(ピクセル・エムプラス)」を選択しています。

PixelMplus(ピクセル・エムプラス) ‥ 8bitビットマップふうフリーフォント
http://itouhiro.hatenablog.com/entry/20130602/font

6767_2

フォントのアップロードが開始されます。

6767_3

6767_4

アップロードが完了したら、変換方法から「BASIC」を選択します。

「BASIC」以外の方法では、日本語(全角文字)の変換が行われませんので、注意が必要です。

選択したフォントの権利に問題が無いことをしっかりと確認したら、「Yes, the fonts I’m uploading are legally eligible for web embedding.」を選択します。

DOWNLOAD YOUR KIT」をクリックすると、変換が開始されます。

6767_5

6767_6

変換が完了すると、自動でダウンロードが開始されます。

6767_7

ダウンロードされたZIPファイルを解凍すると、以下のように、「TTF」「EOT」「WOFF」「SVG」がちゃんと格納されています。

変換元に利用した「TTF」と変換後の「TTF」のファイル容量を比べてみると、若干ですが、変換後の容量の方が大きくなっているので、「TTF」に関しては変換元のファイルを利用した方が良いでしょう。

6767_9

これで変換は無事に成功しました。

CSSでWEBフォントを適用する方法
http://www.materialize.jp/art/css3/6767/

(平成26年7月6日 アシベズヘア@ashibehair_mfacebooknoteSUZURI

unnamed

「TTF」からWEBフォント「EOT」「WOFF」「SVG」へ変換する方法」への2件のフィードバック

  1. ピンバック: CSSでWEBフォントを適用する方法 | materialize.jp

  2. ピンバック: 主要ブラウザ別の「WEBフォント形式」対応表 | materialize.jp

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です