ブログ名の設定は、まだ。 ネット社会の一粒の"地の塩"でありたいと思っています。

Webフォントを試した話。

2014年07月26日 · カテゴリ:Webサービス関係

Webフォントの話を改めて書きたいと思います。
一昨日(2014.07.24)、書体メーカー最大手のモリサワがTypeSquareというWebフォントのサイトでTypeSquare Web Font Tryout(タイプスクウェア Webフォント・トライアウト)というサービスを公開しました。

これは、既存のサイト(ページ)のURLを打ち込むと、書体やサイズ、行間を自由に変更するシミュレーターで、かなり画期的です。
試作のために認証をかけているようなページはエラーになりますが、そうでなければ大丈夫でした。

typesquare

特に登録もなく、試せるサービスなので、Webサイトの管理者はもちろん、制作サイドにもお勧めです。

で、実際の導入費用ですが。

月間1万PV以内で1書体、1サイトであれば無料です。
ただ、パンダアップデートでPVが落ちたとはいえ、こんなブログでも月間1万PVを超えてしまうことが多いわけで、そうなるとどうなるか?

答えは単純に翌月までWebフォントが出ないだけで、別に課金されるわけではありません。

じゃあこのブログにも入れてみるか?と思ったのですが、自分は仕事でアカウント登録しちゃってるのでやめました。
もしご自身のブログに導入してみようと思う人がいたら、やってみては如何でしょうか?
登録はtypesquare.comのサイトで無料でご利用申し込みができます。

アカウントをもらったらデフォルトは無料プランになっているはずです。
マイページで
・利用書体の登録(無料プランは1書体のみ)
・利用サイト(URL)の登録(無料プランは1サイトのみ)
を登録し、さらに
・CSSファイルのフォントファミリーの指定に登録した書体(ソースを提示してくれます)を足します。
・HTMLのHEAD内に指定したjavascriptを埋めます。

これだけです。
別に書体をダウンロードしてサーバにアップロードするわけではありません。
HEAD内に埋めたtypesquare.jsが引っ張ってきてるんでしょうね。

ご興味があればお試しを。

さて、このブログのWebフォント(PC用のページ)ですが、これはモリサワの書体ではありません。
フリーフォントをサーバにUPするやり方です。
ちょっと書いておきますね。

入れたのは「やさしさゴシック」というフリーフォント。
下記は借り物の書体サンプル画像です。

yasashigothic_download3

入れ方は、まず書体のダウンロードから。
上記サイトからダウンロードに進めます。
ダウンロードしたらそれをWebフォントで使えるように加工(変換)をします。

つまりttf、eot、woffという3つのファイルを作るのですが、私はWOFFコンバータという無料ソフトを使いました。

woff
やさしさゴシックの場合はダウンロードした中にあった「07やさしさゴシック.ttf」をWOFFコンバータにかけると、

07やさしさゴシック.ttf
07やさしさゴシック.eot
07やさしさゴシック.woff

というファイルができたので、日本語のファイル名を「07yasashisa」に変えてFTPでUP(「某Dirをルート直下に作って)UPしました。

そのあと、ブログのCSSファイルをあけ(バックアップはとりました)下記のように修正しました。

(1)下記の記述を追加。
@font-face{
font-family: ’07yasashisa’;
src: url(‘/Dir名/07yasashisa.eot’);
src: url(‘/Dir名/07yasashisa.eot?#iefix’) format(‘embedded-opentype’),
url(‘/Dir名/07yasashisa.woff’) format(‘woff’),
url(‘/Dir名/07yasashisa.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}

(2)そもそもあったfont-familyの日本語フォント指定を削除して07yasashisaを追加。
例:body{font-family: ’07yasashisa’;}

それをサーバにUPします。

BODYに指定したので、ページ内の文字をすべて「やさしさフォント」にしてみました。
いかがでしょうか。ご興味のある方はフリーフォントとはいえWebフォントはNGなものもあるため、そのあたりを確認してお試しください。

« 1つ古い記事:

1つ新しい記事: »

Leave a Reply

Trackback URL

記事テーマと関係ないとか、リンクがない場合(一方的TB)、あとアダルトサイトは申し訳ないですが承認しませんので予めご了解ください。またrel="nofollow"つけてるので、SEOのリンクジュースが目的のコメント、TBは残念ながら効果が無いと思います。予めご承知おきください。