手持ちのフォントをWEBフォント用に一括変換してくれるサービス【@FONT-FACE GENERATOR】 – Online Convert to WEBFONT

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。今回のtipsは【手持ちのフォントをWEBフォント用に一括変換してくれるサービス @FONT-FACE GENERATOR】です。正直最近利用しているサービスの中では、ずば抜けて便利なツールのひとつです。PC内の.ttfフォントを.svg、.eot、.woffに変換しさらにフォント指定する為のCSSや表示確認用HTMLも用意してくれます。

@FONT-FACE GENERATOR

.ttfから.svg、.eot、.woffへ変換

細かい設定をする場合は【EXPERT】を選択し、フォントをアップロード【Add Fonts】してください。ただご利用の際には、フォント自体のライセンスにはご注意ください。基本的にはすごく使いやすいジェネレーターですので特別な設定は必要ありません。

表示確認用HTML

ダウンロードを実行すると以下のような表示確認用HTMLが出力されます。実際にWEB上でフォントを使う場合は、このファイルから設定方法の確認が行えます。
 

WEBフォントを表示する方法

WEBフォント表示するには以下ようなCSSを記述します。


@font-face {
font-family: ‘fontset’;
src: url(‘fontname.eot’);
src: url(‘fontname.eot?#iefix’) format(‘embedded-opentype’),
url(‘fontname.woff’) format(‘woff’),
url(‘fontname.ttf’) format(‘truetype’),
url(‘fontname.svg#fontset’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
body{font-family:’fontset’;}

以上になります。