オリジナルのWebフォントを作成できるサイトIcoMoon

SVGファイルを作成し、アップローダーでアップするだけで、オリジナルのWebフォントを作成できるサイトです。ありがたい。

IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Browse among thousands of pixel perfect ico...

SVGファイルを登録

右上のIcoMoonAppをクリックして画面移動します。

作成したsvgファイルをアップロードします。
今回アップしたのは４つの円を作成したものをアップロード。

アップロードしたら、ファイルを選択します。
クリックするとオレンジ色で選択されます。

右下のGenerate Fontを選択します。

画面が表示されて、右下のDownloadボタンからダウンロードできます。
ちなみに、アップロードしたファイルにマウスを当てると、Get Codeがでてきて、クリックするとHTMLやCSSをコピーできます。

HTML、CSSもコピーできて便利ですね。

ダウンロードしたファイル

zip解凍後のファイルです。
fontsフォルダ、style.css、htmlファイルで確認できました。

必要なファイルやフォルダは、fonts、style.cssとhtmlのコードでした。

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>IcoMoon Demo</title>
    <link rel="stylesheet" href="style.css"></head>
<body>
<span class="icon-ashikitaico_circle"></span>
</body>
</html>

拡大してもいい感じです。