font-family〜ワードプレスでフォント(字体)を指定するには?

*color: #FFFFFF, font-family: sans-serif、などですね

アイキャッチ画像はまちがえてました。修行します〜!

– – –

クライアント様のワードプレスをいじっていて「フォントをサイトイメージにあったものに変えてほしい」と要望がありました。

cssの「font-family:〜〜;」で指定するのですが、MS P ゴシックのほか、どうしたらいい!?と、あいまいな知識しかありません。

大急ぎでフォントのcss指定について、調べましたのでまとめます。

左から順に、使うフォントが優先されていく

ブラウザなどの閲覧環境によって、もともとパソコンなどに入っているフォントの種類はちがいます。

「メイリオ、ヒイラギ角ゴ、MS  P ゴシック」など、css管理画面をいじっているとよく見かけます。

この3つをfont-familyで指定したとしたら、左から順に

  • メイリオが入っていたらメイリオを
  • メイリオがなくてヒイラギ角ゴがあればヒイラギのを
  • 左の2つがなくてMS  P ゴシックが入っていたらそれ(MS〜)を

つかって、ブラウザに文字として表示されます。

日本語・英数字フォント、両方に配慮します

もし私がアメリカ人、イギリス人で、ワードプレスも「英語」「数字」だけでページを書いているとしたら「英字・数字」のフォントのことだけ考えて、文字デザイン(css)を指定すればいいです。

でも私たち日本人は英字・数字のほかに「日本語(ひらがな、カタカナ、漢字)」をあつかっています。

うっかり「英字・数字」しかないフォントを選んでしまうと、英数字には対応していてもひらがな・漢字などがなく、ちがうフォントで表示されます。

1つの文章の中に、ちがうフォントがあったら、目が混乱してみづらくなってしまいます><

「Happy birthday!」など英語だけの文字デザイン指定を(はがき印刷など)する時には「Arial」などつかってもよいのですが、ワードプレスページ全体にcss指定をかけるときには、日本語に対応しているフォントをしっかり探します。

serif、で終わると、とりあえず、最低でもserifのフォントで表示してくれる

http://www.xml.vc/property/font/font-family.html

serif(明朝体)、sans-serif(ゴシック体)をfont-familyのラスト(右端)に指定しておくと、最低でもこれらのフォントが呼びおこされ、日本語や英数字をブラウザにうつしてくれます。

Verdana(ヴァーダナ)など人気フォントももちろん羅列しますが、最後にserif(明朝体)、sans-serif(ゴシック体)でしめくくると、安心です。

実際にcssのfont-familyには複数のものを羅列すると思いますが、

  • ゴシック体
  • 明朝体

2つのうちどちらかに統一して、ちぐはぐにならないようにします。

実際にはグーグルクローム「開発ツール」でfont-familyを引っ張り出しました

フォントの種類で何をえらんだら良いのか見当もつかなかったので、実際には「このHPのフォントにしてほしい」と言われたページのフォントを、自分自身で調べました。

調べ方はワードプレスレッスンで教えてもらった「グーグルクロームの開発ツール」で、cssになんと書かれているのか、引っ張り出す方法です。

body〜〜(本文)あたりに当たりをつけて、「font-family」とかかれている箇所をさがします。

背景色ももっと白くしてほしいということなので、ついでにどんな白かいっしょに数値を調べました。

一番よくある「#FFFFFF」でしたので、そのまま採用しました。

アイキャッチにつかった「MS P ゴシック」が説明不十分でしたので、注意点を

MS P ゴシックは

全角英字(MS) + 半角スペース + 全角英字(P) + ゴシック

で書きます。(自分メモ)

スペースのあるフォント名は””(ダブルクォーテーション)などで囲みます。

“ヒラギノ角ゴ Pro W3″

シングルクォーテーション’   ‘でもよいと見かけた気がしますが、不正確かもしれませんので、使用前に調べた方がよいです。

わたしが見本で指定された会社HP2つは、どちらも” “(ダブルクォーテーション)でフォント名をかこっていました。

まとめ:角フォントをさがします

見出し用に「角字」のフォントをさがしています。

まだ途中ですが下あたりを参考にします。

http://unitopi.com/font-family-css/

「フォント一覧」もみつけました

https://w3g.jp/sample/css/font-family

選び方 デザイン面から 学習には少し長くかかりそう

超厳選!Googleフォントおすすめ40選を用途別に紹介【導入方法解説付き】