web fontsを使用

どうもです。(@tw)です。日々技術的なことで悩む毎日でございます。
今日は、web fontsについて
目的はサイトを綺麗に作る事です。紙の媒体などは出力するので綺麗っす。でもwebサイトは拡大出来ちゃうことから画像だと「うほぉ」むむむとかやっぱ思っちゃいます。スマホなんかでチョット拡大することも多くなってるのではないですかねぇ。レスポンシブデザインで作ればあまり拡大などしないかもしれませんが、、、

『ちくしょー綺麗に作りたい!』←当たり前だと思いますが、これ凄く大事だと思いますけど

  • web fontsの利用 ←今回これで
  • SVG埋め込み
  • retina用に画像を2つ

積極的にweb fontsを使っていく

google検索エンジンは画像のaltタグは読み込んでいるよと、画像の前後の文章からちゃんと意味が通じることが前提ぽぃ。ただweb fontsの方がベストだろうと言っています。当たり前ですよね。だってテキスト文字なのだから
(SEOを考える、、制作者が考えなくて誰が考えるのかと)
titleなんてのはケースバイケースですよね。ただ、画像で作る場合はretina用に画像を2つ用意することがいるかなぁと。
画像関係の便利ツールです。
画像圧縮ツール imagealpha
retina画像生成ツール slicy ←有料、デモ版あり

web fontsを使う上で困った

safari6でweb fontsが読めなくてなんで読めないのと、その間web fontsの実装を断念。chrome,firefoxは読めるんですよ。
検索するも全然でてこないし、Mountain Lionになってからsafariの設定がスタイルシートになったのが原因なのかなぁと思ってドツボにハマってました。
技術仕様なんかみてもsafariはweb fontsに対応してるとなってるし、100%自分の環境だと検索しまくった。
スタッフ総出で一生懸命探してきました。そしたら生きておられました。
(グスン、なんか昔のテレビ番組ぽぃ)
感動の再会です。
HelveticaTheWorldrなんですか?このHelveticaTheWorldっておっしゃるものは、、
いつ追加したかもわかっておらず、無効にしたらちゃんとweb fontsを読み込みました。万が一同じ様なことになっていらっしゃる方は機能拡張あたりをご確認ください。chrome,firefoxの機能拡張でもこういうたぐいのプラグインとかあるのかどうか解りませんが、、
海外サイトで読みづらい英文字がある場合は有効にして使おう、、(泣)
今回は自分がHelveticaTheWorldのことを理解せず、機能拡張いれていたので、おそらく同じ問題に遭遇する方はいないと思い、積極的にweb fontsを使っていこうと思います。

web fontsを使う

compass使ってるので普通に@include font-face〜なんちゃらで追加になると思いますが僕はこうしてます。

@mixin font-face-fixed($name, $font-files, $eot: false, $weight: false, $style: false) {
  $iefont: unquote("#{$eot}?#iefix");
  @font-face {
    font-family: quote($name);
    @if $eot {
      src: font-url($eot);
      $font-files: font-url($iefont) unquote("format('embedded-opentype')"), $font-files; }
    src: $font-files;
    @if $weight {
      font-weight: $weight; }
    @if $style {
      font-style: $style; } } } 

@include font-face-fixed("icomoon", font-files("icomoon.woff", "icomoon.ttf", "icomoon.svg#icomoon"), ("icomoon.eot" )) ;
@include font-face-fixed("Chango-Regular", font-files("Chango-Regular.woff", "Chango-Regular.ttf"), ("Chango-Regular.eot" )) ;

mixinで記述しておいて読み込むフォントを随時14,15行の@includeの部分にフォントネームいれちゃえば追加できるので楽ですね。
scssは、_fonts.scssに記述しています。
あとは、config.rbには、fonts_dir = “fonts”を記述していて
mainのscssで@import “fonts”;を読み込ませて置けばokですね。

英字Google web fonts

英字はGoogle web fontsにいっぱいあるのでさて、どれ選んじゃう?的にワクワクしちゃいます。さらに文字数が少ないのでサブセット化は、ほぼしなくてもいいかと思います。英字やアイコン等は解決。
がぁあああ。日本語のfontsは文字数が多いためサブセット化しないとサイトのパフォーマンスに影響与えちゃうのでそのまま読み込ませても無理。
各種日本語web fontsサービスは使う気にならず。購入したフォントなどもサブセット化は著作権の問題でだめ。
ヨモツネットさんでは和文フリーフォントをまとめてくれていて大変助かります。サブセット化okのフォント等ありまして作者様に感謝いたします。

Glyphs

少ない文字数ですから使用する文字だけ作成し、作ってしまえばってことになると思うんですが、Glyphsってfonts作成ソフトなんかもありますね。
web fontsは当分英字とアイコン等で使用する感じなのかなぁと思います。