スタイルシートにおける、「font-family」の設定方法ですが、いつも使うけど本当に毎回忘れがちなので、メモしておきます。

フォント名が難しいせいですね、きっと。スタイルシートに下記のようなに書きけば、設定できます。

日本語・明朝体の設定

font-family:
"游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" ,
"ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" ,"HiraMinProN-W3",
"HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" ,
serif;

日本語・ゴシック体の設定

font-family:
"游ゴシック体", "Yu Gothic", YuGothic, 
"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
"メイリオ", "Meiryo",
sans-serif;

CSSとフォントの小話

上記の游ゴシック、游明朝は、MaxOS (OS X) Marvericks からマックのデフォルトになりましたね。綺麗でスッキリしたフォントです。ヒラギノや、メイリオを優先したい人は、上記の順番を入れ替えてやればおーけーなので勝手に変えて下さい。

スタイルシートでは、基本的に先に書かれているのが優先されます。見つからなければ次、次、とフォールバックしていきます。ですので、ウェブフォントなどをロードして、英語文字だけ英語のフォントを使いたい時は、

font-family:
"Helvetica Neue"
"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
"メイリオ", "Meiryo",
sans-serif;

と先に指定すればいいわけです。英語フォントはアルファベットと記号のみですので、日本語文字は後ろのヒラギノが引き受けてくれるというこんたんです。

ウェブフォントの使い方

ロードの仕方

CSS内部でインポートしないほうがいいです。そうではなく、HTMLのHEADタグでロードしてください。理由はその方が早いからです。

Google Font であれば、このように・・・

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

CSSにImportを書くと、ロードの順番が

1. xxxx.cssをリクエスト・・
2. xxxx.cssをロードが開始・・・、完了。
3. xxxx.cssに書かれているimport zzzzz.otfをリクエスト・・・
4. zzz.otfのロードが開始・・・、完了。

となってしまいます。HTMLのHEADに書けば、HTMLの完了と同時にリクエストが発生しますので、.cssと平行でロードが実行できることになります。

 

メジャーな英文字フォント

ついでなので、日本人には馴染みがすくない英文字フォントを紹介しておきます。メジャーどころなので、業界の人はだいたい知っていると思います。

Helvetica Neue：
https://www.myfonts.com/fonts/linotype/neue-helvetica/

Proxima Nova：
http://www.marksimonson.com/fonts/view/proxima-nova

 

Gotham：
http://www.typography.com/fonts/gotham/overview/

Google Font より（無料）

Open Sans：
https://fonts.google.com/specimen/Open+Sans

Maven Pro：
https://fonts.google.com/specimen/Maven+Pro