cssの@font-faceのフォーマットをアップデートした。

これまではFontspring @Font-Face Syntaxに従い以下のように記述していた。

1@font-face {
2  font-family: 'MyFontFamily';
3  src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
4       url('myfont-webfont.woff2') format('woff2'),
5       url('myfont-webfont.woff') format('woff'),
6       url('myfont-webfont.ttf') format('truetype'),
7       url('myfont-webfont.svg#svgFontName') format('svg');
8}

対応ブラウザは以下とされている。

| ブラウザ | バージョン | |----|----| | IE | 6+ | | Firefox | 3.5+ | | Chrome | 3.5+ | | Safari | 3+ | | Opera | 11+ | | iOS | 3.2+ | | Android | 2.2+ |

この書式はは2011年に提唱されたもので、2015年ゲイン材のブラウザ情勢からみるとやや冗長に感じる。

よって下記を参考に今回アップデートを図った。

• Using @font-face | CSS-Tricks

1@font-face {
2  font-family: 'MyFontFamily';
3  src: url('myfont-webfont.woff2') format('woff2'),
4       url('myfont-webfont.woff') format('woff'),
5       url('myfont-webfont.ttf')  format('truetype');
6}

eotとsvgを削除した。この変更後の対応ブラウザは以下である。

| ブラウザ | バージョン | |----|----| | IE | 9+ | | Firefox | 3.5+ | | Chrome | 3.5+ | | Safari | 3+ | | Opera | 11+ | | iOS | 4.3+ | | Android | 2.2+ |

IE9からはWoffに対応しているので、もう少し時間がたてばTTFも消せるのでは。
Woff2の普及はまだまだこれからといったところだ。