いずれも使い方は簡単。
検索すればキャプチャ画像付き解説記事も多いので、
簡単に個人的な利用経過メモのみ。
タイプスクエアで日本語フォントを選ぶ
TypeSquare でメンバー登録をすると、すぐに無料版が利用できるようなる。
フォントはリストから検索したり、「シュミレーション」であれこれ試したりして選ぶ。任意の文字列でのシュミレーションは出来ないが、タイトル、リード、本文でサンプルフォントと大きさを変えてみるとかなりのイメージはつかめる。
選択したフォントはマイページで変更できる。実装で試すにはここをいちいち変更しなければいけないけれど、無料なんだし仕方がない。
埋め込みコードもマイページから取得できる。
script コードをheader.php の ＜/head＞直前に置き、
css でフォントファミリーを指定する。
マイページにはPV数のリポートもある。無料リミットの月1万PVを超えるとデフォルトのフォントに戻る（とのこと）。
GoogleWebFonts で欧文フォントを選ぶ
https://www.google.com/fonts ではメンバー登録も不要。数がありすぎて選択が大変なのが難、というくらい種類は豊富。Preview Text に視認したいテキストを入力し、filter で絞り込むなどしてとにかくいくつか選ぶ。
Add to collection でフォントを選び、Use ボタンを押す。
Choose the styles you want: で、ウェイトやイタリックなどを選ぶと、head内に貼るコードと、cssコードを取得できる。
Add to collectionで複数を選び、全てを利用することもできる。
<link …> か <scrpt …>コードはいずれかを head 内に、
＠ … コードを利用する場合は css 内に。
通常スタンダードの<link …> でいいらしい。
どう使い分けるのかは不明。
私の場合、本文用の欧文Webフォントをサイトに置いて＠で呼び出しているので、
Googleも同様＠でcssに置いてみた。
日本語と欧文を混在させるには、cssでフォントファミリーを指定の際、Google欧文フォントを先に、次いで日本語Webフォント、以下に標準フォント、と併記する。
font-family: ‘Josefin Slab’, “教科書ICA L”, ‘Hiragino Mincho ProN’, “ヒラギノ明朝 Pro W3”, “ＭＳ Ｐ明朝”, “ＭＳ 明朝”, serif;
IE8以下をどうするか
IE8以下では正しく表示されない。少し調べたけれど、面倒くさくなってしまって放置することにした。仕事であれば別だろうけれど、趣味の個人サイトなので。しかもフォントが標準フォントに戻るというだけのことで、その他のIE8、もしくはIE7以下の諸問題（機能の未対応や画像のサイズ制御、レイアウト崩れなど）に比べればたいした問題ではないし（でも、やっぱり、いつも、問題はIEなんだなあ、タメイキ）。
ブラウザの設定でWebフォントを非表示にしている人も（ごくわずかだが）いるようだし、cssのフォントファミリーで標準フォントをさらに併記してみた。1万ページ/月を超えた場合も、第二候補以下の標準フォントが表示される（はず）。
本文用にサーバーにアップしている欧文Webフォントは、eot というタイプで、＠で呼び出すことによってIE8でも表示される。
コメント