今回は、サイトの文字、font-familyの変更について学んだことを紹介したいと思います。
使用テーマはyStandardです。
yStandard
きっかけ
ブログを始めた頃、文字は游ゴシックで表示させていました。
ですが、游ゴシックはちょっと細くて読みにくいかなと感じたので他のフォントで表示させようと、いろいろ調べることになりました。
游ゴシックは細目ですっきりした書体。
メイリオはWindowsに標準で搭載されているフォント。
見やすい。
ヒラギノ角ゴはMacに標準で搭載されているフォント。
こちらも見やすい。
font-familyの変更はcssで
yStandardのカスタマイズに追加cssという項目があります。
フォントの変更はここで行います。
font-familyの指定方法
ここでは、サイト全体の文字(フォント)を変更してみます。
body {
font-family: Mac用欧文フォント, Windows用欧文フォント, Mac用日本語フォント, Mac用日本語フォント英語表記, Windows用日本語フォント, Windows用日本語フォント英語表記, 総称ファミリー;
}
ざっくり書いてもこれだけ必要になります。め、めんｄ・・・
とりあえず、bodyでサイト全体を指定し、font-familyで表示させるフォントの種類を指定します。
フォントは指定された順に適用していくので、先に書かれたフォントが優先的に表示されます。
1. フォントはMac用とWindows用それぞれ指定します。これは、OSによって標準で搭載されているフォントが異なるためです。
2. 欧文フォントはアルファベットや数字を表示させます。英数字や記号は欧文フォントに任せた方が綺麗に表示されるので、日本語フォントより前に記述します。
3. メイリオとMeiryoのように日本語フォントには英語表記もあります。日本語フォントを指定する際は両方記載する方が無難です。日本語表記だと読み込まれないことがあるとか。
4. フォント指定の最後に総称ファミリーといって、今まで指定されてきたフォントがすべて適用できなかったとき用に、どの環境でも表示できるフォントの総称を指定します。sans-serifなど。
5. 締めに;(セミコロン)を忘れずに。
フォント指定時の注意
フォントの中にはCentury Gothicやヒラギノ角ゴ ProN W3のようにスペースが含まれる名称があります。
このようにスペースを含むフォント名を指定する場合、フォント名をシングルまたはダブルクォーテーションで囲むというルールがあります。
body { font-family: Avenir, "Century Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; }
Avenirはスペースを含まないのでそのまま記述。Century Gothicはスペースを含むのでダブルクォーテーションで囲む、といった感じです。ヒラギノ角ゴ ProNが表示されない？
macOSでcatalinaを利用している環境だと、Chromeブラウザでヒラギノ角ゴ ProNが表示されないようです。
"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴシック", "Hiragino Sans"
このように、ヒラギノ角ゴ ProNの後にヒラギノ角ゴシックを追加しておくと、ヒラギノ角ゴ ProNが表示されない場合はヒラギノ角ゴシックが表示されるようになります。
他のサイトはどんなフォント？
気になるあのサイトはどんなフォントを使っているの？
というわけで、chromeの拡張機能を使って調べてみます。
Yuko Sugimoto
WhatFontという拡張機能です。
調べたいフォントの上にカーソルを置き、クリックするだけで詳しいフォントの情報を教えてくれます。
WhatFont
先ほどのサイトのフォント情報はこんな感じ。
font-familyの情報も載ってますね。
ひとつ注意点があります。
フォント指定の時にも触れましたが、自身のPCに入っていないフォントは当然表示されないので、そこは気を付けなければなりません。
例外として、webフォントというものがあります。
これは相手のPCにそのフォントが入っていなくても指定したフォントで表示させることができます。
フォント名を検索して、自分の目で同じかどうか確認することも大事ですね。
font-familyのどれかであることは確かなので。
フォントを変える、この一事がこんなにも大変だったなんて、というのが率直な感想です。しかも、自分には綺麗に見えても他のユーザーからは違って見えるかもしれないというトラップ付きです。
ですが、追加cssでやるということ、font-familyの指定のルールなどを覚えられたのでとても勉強になりました。