Fonts編)』の続きです。Fontsを使って、お手軽にWebfontを使う方法をまとめましたが、今回は通常のサーバに置いたWebfontを使う場合の手順をまとめます。いっても実はあまり変わりません。Fonts以外でもWebfontを公開しているサービスが少しあります。いっても、まだまだ数は少ないです。M+Fontは、実験的に公開していますが、あくまで実験的です。いう意味では、自分で公開する必要が出てくるかもしれません。このサイトで使っている『やさしさゴシック』は、Webfontとして公開されているわけではないので、自分でWebfontに適した形式に変換してサーバに置いています。この辺のWebfontの作り方は、また別の機会で紹介したいと思います。Webfontが公開されているものとします。Javascriptにより使うWebfontをロードする自サイトのヘッダに以下のJavascriptを貼り付けます。Wordpressだと、header.phpに突っ込めばOK。前回の手順とほぼ同じです。Loaderというライブラリです。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です。最後に、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で指定しています。sans-serif;}以上で、自由なフォントを自分のページに使えるようになります。Fontsとほぼ同じ方法で使えるようになります。CSSに指定する@font-faceがポイント。comment返信をキャンセルする。(2)『やさしさゴシック』フォントについて。