あかつきのお宿

フォントって、実にいろいろな種類があるじゃないですか。

MSゴシックとかはまあ言うまでもないですが、中には手書きっぽいフォントを作って公開している人もいらっしゃいます。

今回はそんなフォントの中から、無料で使ってもよろしいよとおっしゃっているありがたいサイトのフォントをありがたくちょうだいしてきて、お宿に導入してみました。

ブラウザによって見れたり見れなかったりですが、以下の環境なら見れるんじゃないかと思います。少なくとも自分のパソコンではそうです。

・Firefox 3.6
・safari 5.0
・google chrome 8.0

同じような環境の人なら、このサイトのフォントが変わっているはず。っていうか、変わっていなかったら連絡くらはい。何か設定を間違えたってことなので。

ウェブフォントを利用している他のサイトさんの記事を読む限りでは、OPERAでもいけるらしいんすけど、うちのパソ子に入っているOPERA10.63ではフォントが変わっておりやせんでした。OpenTypeってやつじゃないとダメなのかな。

IEでは見れないっぽいです。まあ、IEだと角丸すら見れないからな……仕方ない。


今回は、Cinecaptionというフォントを使わせていただきました。あざっす！

無料利用可みたいな話を聞いたから使わせてもらったけど、大丈夫だよね？　ね？

怒られたら謝ろう、うん。


設定はわりと簡単です。上記のサイトさんからzipファイルをもらってきて、解凍して、それをサーバーにアップする。あとはスタイルシートに必要事項を記入するだけ。必要事項を記入って申し込み書みたいだな。

@font-face {
    font-family:フォント名;
    src:url(ファイルのパス) format("フォーマット");
}

body {
    font-family:フォント名;
}

こんな感じでオッケーです。フォント名は、今回の場合だと『Cinecaption』ですね。

zipを解凍すると、中に.ttfという拡張子のファイルがあると思うんですけど、ファイルのパスにはそのttfファイルのパスを書いてあげる。フォーマットは『OpenType』か『TrueType』があります。ttfファイルならTrueTypeです。OpenTypeというのは拡張子が.otfの場合のようですね、たぶん。

あとはパスに書いた通りの場所にそのttfファイルをアップロードすれば、自分のパソコンにそのフォントをインストールしていない人でも当該のフォントで見られるようになる……はず。

CSS3からの対応みたいですね、このウェブフォントの利用ってのは。


ウェブ上のブログでこういう手書き風のフォントだと見やすいのか見づらいのかはいまいちまだ判断のつかないところなんですけど（色合いとかフォントの大きさとかも関係すると思うけど）、せっかく利用させていただいたので、しばらくはこれでいってみようと思います。個人的には結構良いなぁと思っているんですがね。奇麗な字だし。

自分が紙の上にペンで字を書くときにこれだけの字が書けたら、良いだろうなぁ。

特技に「字がきれい」って書きたいわ。