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」をクリックします。
変換したいフォントを選択します。
ここでは8bitビットマップ風フリーフォント「PixelMplus(ピクセル・エムプラス)」を選択しています。
PixelMplus(ピクセル・エムプラス) ‥ 8bitビットマップふうフリーフォント
http://itouhiro.hatenablog.com/entry/20130602/font
フォントのアップロードが開始されます。
アップロードが完了したら、変換方法から「BASIC」を選択します。
「BASIC」以外の方法では、日本語(全角文字)の変換が行われませんので、注意が必要です。
選択したフォントの権利に問題が無いことをしっかりと確認したら、「Yes, the fonts I’m uploading are legally eligible for web embedding.」を選択します。
「DOWNLOAD YOUR KIT」をクリックすると、変換が開始されます。
変換が完了すると、自動でダウンロードが開始されます。
ダウンロードされたZIPファイルを解凍すると、以下のように、「TTF」「EOT」「WOFF」「SVG」がちゃんと格納されています。
変換元に利用した「TTF」と変換後の「TTF」のファイル容量を比べてみると、若干ですが、変換後の容量の方が大きくなっているので、「TTF」に関しては変換元のファイルを利用した方が良いでしょう。
これで変換は無事に成功しました。
CSSでWEBフォントを適用する方法
http://www.materialize.jp/art/css3/6767/
(平成26年7月6日 アシベズヘア@ashibehair_m/facebook/note/SUZURI)
ピンバック: CSSでWEBフォントを適用する方法 | materialize.jp
ピンバック: 主要ブラウザ別の「WEBフォント形式」対応表 | materialize.jp