@font-faceの記事を読んで、woffというフォント形式と新しい書き方を見たのでやってみる。

こんなかんじになってたら成功。

実際にやってみたのはこちら。
HELLO @FONT-FACE.
The quick brown fox jumps over the lazy dog.

HELLO @FONT-FACE.
The quick brown fox jumps over the lazy dog.

ソースはこうなってる。
これがなうなヤングにばかうけでクールな書き方らしい。

/*ひとつめ*/
@font-face
{
    font-family: 'KulminoituvaRegular';
    src: url('../../../../../samples/css/font-face/kulminoituva-webfont.eot?') format('eot'),
         url('../../../../../samples/css/font-face/kulminoituva-webfont.woff') format('woff'),
         url('../../../../../samples/css/font-face/kulminoituva-webfont.ttf') format('truetype'),
         url('../../../../../samples/css/font-face/kulminoituva-webfont.svg#webfontMaZ7jjQN') format('svg');
    font-weight: normal;
    font-style: normal;
}
.style1
{
    font: 60px/68px 'KulminoituvaRegular', Arial, sans-serif;letter-spacing: 0;
}
.style2
{
    font: 18px/27px 'KulminoituvaRegular', Arial, sans-serif;
}
/*ふたつめ*/
@font-face {
    font-family: 'FFFTusjBold';
    src: url('../../../../../samples/css/font-face2/FFF_Tusj-webfont.eot?') format('eot'),
         url('../../../../../samples/css/font-face2/FFF_Tusj-webfont.woff') format('woff'),
         url('../../../../../samples/css/font-face2/FFF_Tusj-webfont.ttf') format('truetype'),
         url('../../../../../samples/css/font-face2/FFF_Tusj-webfont.svg#webfontjNIpX9Om') format('svg');
    font-weight: normal;
    font-style: normal;
}
.style3
{
    font: 60px/68px 'FFFTusjBold', Arial, sans-serif;letter-spacing: 0;
}
.style4
{
    font: 18px/27px 'FFFTusjBold', Arial, sans-serif;
}

開いてわかると思うけど、重い。表示までに時間かかる。
英字でこれだと、日本語だとやはり現実的じゃなくなってしまうなぁ。
woffだけ読めばいいようになればもっと早くなるのかな？
だとしても日本語は無理だけど。マルチバイトのウェブデザインは取り残されていくのかな・・・。

参考記事。
Webフォント (Webfonts)を使う際の最新記述方法 Fontspring Syntax (The New Bulletproof@Font-Face Syntax)
http://blog.petitboys.com/archives/fontspring-syntax.html
Font Squirrel
http://www.fontsquirrel.com/