[HTML & CSS General] Web Font を作って使う

memo.

[markdown]
## 全般

> * [第4回 CSS3のWebフォントを使ってみよう | Think IT（シンクイット）](http://thinkit.co.jp/story/2011/08/18/2233)

## Generator

Online

> * [IcoMoon App – Icon Font & SVG Generator](https://icomoon.io/app/#/select)
> * [メリットだらけ！SVG形式で保存したアイコンをウェブフォントにしてスマホサイトで使う方法 | casemobile by hi-posi inc.](http://case-mobile-design.com/svg_font/)

Grunt

> * [sapegin/grunt-webfont](https://github.com/sapegin/grunt-webfont)

CLI

> * [FontCustom/fontcustom](https://github.com/FontCustom/fontcustom)

## @font-face

> * [Using @font-face | CSS-Tricks](http://css-tricks.com/snippets/css/using-font-face/)

“`css
@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’); /* IE9 Compat Modes */
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
url(‘webfont.woff2’) format(‘woff2’), /* Super Modern Browsers */
url(‘webfont.woff’) format(‘woff’), /* Pretty Modern Browsers */
url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */
}
“`

その他

> * [WebフォントのCSS指定2014年度版とこれまでの歩み – WEBCRE8.jp](http://webcre8.jp/compare/webfont-fontface-syntax-2014.html)

## 関連サイト

> * [Webフォントを利用する際に知っておくと役立ちそうなTipsとかサイトいろいろ – かちびと.net](http://kachibito.net/web-design/web-font-tips.html)

## 補遺

SVGの場合。

> * [どっちのベクターSHOW!! SVG vs Webフォント を比較する – WP-E（仮）Web Professional Education](http://wp-e.org/2014/06/04/2650/)
> * [アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう | Webクリエイターボックス](http://www.webcreatorbox.com/tech/svg-vector/)
[/markdown]