Webfontをつかう (自由なフォント編)
『Webfontをつかう (Google Fonts編)』の続きです。
前回は、Google Fontsを使って、お手軽にWebfontを使う方法をまとめましたが、今回は通常のサーバに置いたWebfontを使う場合の手順をまとめます。
といっても実はあまり変わりません。
1. 使いたいWebfontを探す
最近はGoogle Fonts以外でもWebfontを公開しているサービスが少しあります。
といっても、まだまだ数は少ないです。
例えばM+Fontは、実験的に公開していますが、あくまで実験的です。
そういう意味では、自分で公開する必要が出てくるかもしれません。
このサイトで使っている『やさしさゴシック』は、Webfontとして公開されているわけではないので、自分でWebfontに適した形式に変換してサーバに置いています。
この辺のWebfontの作り方は、また別の機会で紹介したいと思います。
今回は、http://example.com/myfont.woff でWebfontが公開されているものとします。
2. Javascriptにより使うWebfontをロードする
自サイトのヘッダに以下のJavascriptを貼り付けます。
Wordpressだと、header.phpに突っ込めばOK。
前回の手順とほぼ同じです。
前回も出てきた以下のJavascriptは、実はGoogleが公開しているWeb Font Loaderというライブラリです。
Web Fontをページのロードと非同期にロードしたり、いろいろな工夫をするためのツールセットです。
このライブラリを使った工夫は、別の機会に紹介する予定です。
ポイントは、WebFontConfigです。
ここで、どのWebfontを使うか指定します。
前回は、googleというキーの値としてfamiliesを使って使うフォントを指定していました。
今回は、customというキーを使い、Webfontの場所を自分で指定します。
custom内に指定しているfamiliesは、使うWebfontのフォント名です。
これは、後のCSSへの適用で出てきます。
urlsは、使うWenfontの在処が定義してあるCSSのURL。
これを指定しないと、このJavascriptが記述されているページを探します。
例では、familiesにmyfontを指定しているので、myfontという名前のフォントを使います。
また、urlsにhttp://example.com/style.cssを指定しているので、style.cssにWebfontの在処が定義される必要があります。
ちなみに、familiesもurlsも複数指定できます。
複数のフォントを使いたければ、カンマ区切りで並べればOKです。
[code lang=”html”]
<head>
….
<script type="text/javascript">
WebFontConfig = {
custom: {
families: [ ‘myfont’ ],
urls: ["http://example.com/style.css"]
};
};
(function() {
var wf = document.createElement(‘script’);
wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
wf.type = ‘text/javascript’;
wf.async = ‘true’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
</head>
[/code]
3. CSSへの適用
最後に、CSSを書きます。
Wordpressなら style.css に書いておけばいいです。
前回は、適用したい要素にfont-familyを指定していただけでしたが、今回は@font-face定義が増えています。
ここで、Webfontを定義しています。
font-familyには、Webfontの名前を定義します。
実は、これはなんでもいいです。
このフォントをこの名前で呼びますよ、という定義をしているだけです。
ただし、2で指定したfamiliesと名前があっている必要があるので、その点は注意してください。
srcは、このWebfontの在処を定義します。
ここにはカンマ区切りで複数定義できます。
例では2つ指定しています。
ひとつは、localで指定していますが、これはWebを見ているユーザのPCに通常のフォントとしてインストールされていたらそれを使うということです。
マニアックなフォントを使っていたら可能性は低いですが、一応指定しておくのがいいと思います。
ふたつめのurlは、Webfontの公開URLです。
このURLを頼りにページロード時Webfontがダウンロードされます。
ちなみに、例ではwoffという拡張子のフォントを指定していますが、これはWebfontの標準的な形式で通常のフォント形式より少し圧縮されたものです。
一応この形式であることをブラウザに教えるためformatで指定しています。
[code lang=”css”]
@font-face
{
font-family: myfont;
src: local(‘myfont’),
url(‘http://example.com/myfont.woff’) format("woff");
}
h1 {
font-family: ‘myfont’, sans-serif;
}
[/code]
以上で、自由なフォントを自分のページに使えるようになります。
まとめ
- 自由なフォントを使う場合も、Google Fontsとほぼ同じ方法で使えるようになります。
- CSSに指定する@font-faceがポイント。
Leave a comment