意外と知らないフォント設定の仕方

vanillaice (Akira)

2017-03-06

カスタマイズ

よく行われるテンプレートカスタマイズに「フォント種の変更」があるかと思います。
サイズや色でなく「フォント名」ね。
このフォント指定ですが、実はとっても難しいんですね (´・ω・｀)
というわけで、正しい指定の仕方やフォント指定の挙動、
そして失敗するケースなどなど記しておこうと思います。

フォントはOS依存です

フォントというのは、そのパソコンが WindowsであるのかMacであるのかによって表示できるもの・できないものとがあります。
フォントというのはOSにバンドル(搭載)されていなければ表示することはできません
「そのパソコン」といっても、ページ管理人のパソコンだけじゃないですよ。
閲覧している方のパソコン (OS) のことを考えなきゃいけません。

ここをまずご存知でない方が結構いらっしゃるんですね (´・ω・｀)
Windowsで代表的なメイリオ (Meiryo) はMacの標準フォントとして採用されていませんので、どう指定してもどう頑張ってもMac上で表示させることはできません。
同じくMacで代表的なヒラギノ (Hiragino) 系列もWindowsでは… 以下同文

webフォントはどうなの

webフォントで最も有名なのは Google fonts で、読んで字のごとくGoogle様のライブラリです。
こういったフォントサービスでは、head情報内にリンクを設定しアクセスすることで表示を行います。
ですから OSの種類に関係なく指定フォントを表示させることができます。
すげー便利 (´・ω・｀)
ただし
読み込みに要する時間
リンクで情報を取得しますので多少の時間はかかります。複数・多数のフォント種を設定すると倍々で処理が重くなります。
基本的には欧文フォントしか提供されていない
日本語というのは世界的に見てもかなり特殊な言語の部類に入ります。
なにせ「ひらがな」「カタカナ」「漢字」「アルファベット」「数字」「記号」
と、これだけ多種な要素がありますので、それらを網羅すると欧文のそれと比べてものすごく情報量が多いわけです。
そして日本語は欧文フォントが一文字あたり半角1B (いちバイト) であるのに対し、全角2B ですので基本容量も2倍です。
それをリンクで読み込むとなるとかなりの負荷です。
仮にGoogle様で提供されるようになったとしても、迂闊に使わない方が良いと思います(笑)
現在では Notoフォントが日本語として提供されているぐらいでしょうか。

フォントには表示優先順位を設けるべき

フォント自体がOS依存であることに加え、OSのバージョンによる標準搭載・非搭載も考慮しなければいけません。
め、めんどくせ… （￣∀￣；）
例えばMac/ Windows共通フォントの游ゴシック体は
Macでは OS X10.6 Marverics 以降。
Windowsでは Windows8.1 以降。
ですからテンプレートで游ゴシック体を指定したところで、Windows7をお使いの方には游ゴシック体では表示されません。
もしも閲覧者のOSに該当フォントが無い場合にどうなるかというのは後述しますが、
指定フォントが「存在しない場合」に備えて複数のフォントをMac向けとWindows向けと双方指定しておく必要があります。

フォント指定の仕方

優先順位を設けるフォント指定の仕方です。
実際に作業を進めながら説明していこうと思います。
応用する際、どのOSにどのフォントがあるのか、というのは事前に自力でお調べになって ←

font-family: Mac第一優先欧文フォント, Mac第二優先欧文フォント, Windows第一優先欧文フォント, Windows第二優先欧文フォント, Mac第一優先フォント日本語名, Mac第一優先フォント英字名, Mac第二優先フォント日本語名, Mac第二優先フォント英字名, Windows第一優先フォント日本語名, Windows第一優先フォント英字名, Windows第二優先フォント日本語名, Windows第二優先フォント英字名, 総称ファミリー;

ヤッダー（￣∀￣；）
なにこれ正気ですか？って感じ。
きっちりやろうと思えば上記の通り。
日本語フォントには通常「日本語名」と「英字名」とがあります。
それでもまぁ、英字名で書いておけば大概大丈夫。
日本語名と英字名、どちらかを削るならば「日本語名」の方を。

欧文フォントを最初に書きます。
Mac/ Windowsに共通欧文フォントがあるのならば都合が良いですね。
ほとんど無いけどね((((笑)
あるいはこの欧文フォントをwebフォントでまかなうのならば、Mac/ Windowsの別は考えなくて済みます。

例)
・ Macの欧文フォントを Futura (読み方: ふーつら) に。
・ Windowsの欧文フォントを Century Gothic (読み方: せんちゅりーごしっく) に。

両者とてもよく似たフォントですが、
FuturaはWindowsに無く、Century GothicはMacにはありません。
従って両方を書く必要があります。

フォント名に半角スペースが含まれている場合には必ずダブル or シングルクォーテーションで囲います Century Gothic がそうですよね。
Century と Gothic の間に半角スペースがあります。
フォント名は一字一句でも間違えるともう正しく解釈されませんので、半角スペースを勝手に取ってしまったり、大文字部分を小文字に変えてしまったり、といったことは基本的にはできません(できるフォントもありますが、できないと思って挑みます)。
ちなみに欧米の方は「ふーつら」ではなく「ふとぅーら」と発音します。
ふーつらなんて欧米人には発音できひんしー (´・ω・)ﾉｼ

Mac用フォントを先に書く… 方が良いと思う
これ実際にはあんま関係ないようですが、何かの名残です。何かの ←
MacにMicrosoft系アプリ(wordなど)を入れているとWindows特有フォントをインストールしている可能性が高いので、そういった意味もあるかと思います

font-family: Futura, 'Century Gothic'

ひとつフォント名を書いたらば、後ろに , (カンマ)を書いて次のフォント名。

記号と数字は欧文フォントのカテゴリです

これも覚えておかなければいけませんね。例えば
&
なんかはフォント種によって表示が大きく異なります。
また時折「記号を全角で入力したら、なんだか形状がヘン…」
といったことも起こりますが、
基本的に欧文フォントで全角というのはできません。
「全角」という概念がそもそもありません。
が、稀に全角を表示できるフォントもあって、その表示がちょっとアレでソレ、という場合ですね。たぶん(笑)

これまでの作業でMacではアルファベットや記号は「Futura」で。
Windowsでは「Century Gothic」で表示されるようになりました。

ここまでが欧文フォント指定。
まだまだ続くよ。
欧文第二優先は割愛 ←

日本語第一優先フォントを指定
游ゴシック体にしようと思います。
ところがこのフォント、Mac/ Windows共通ではあるものの。
MacとWindowsとで名称が違います
そういうのやめてくれんかな。ホントに (´・ω・｀)

Macの場合
日本語名游ゴシック体
英字名 YuGothic

Windowsの場合
日本語名游ゴシック
英字名 Yu Gothic

万全を期すならば全部書かないといかんですね (´・ω・｀)
私がどうしているかと言うと、Macでは英字名 YuGothicで認識してもらい、Windowsでは日本語名游ゴシックで認識してもらう… という方法を取ってます。
が、ここではちゃんとやろうと思ふ。
日本語名の方を先に書きましょう。

font-family: Futura, 'Century Gothic', 游ゴシック体, YuGothic

Windowsの方はまだ書かないですよ。
Macの方を先にチャチャっとやります。
さっき言った通り Mac → Windows の順に指定しますので。

日本語第二優先フォントを指定
游ゴシック体はWindows7やらMac OS X10.5やらでは表示できませんので、比較的古いバージョンのOSにも搭載されているフォントを探します。
代表的なものは
Mac --- ヒラギノ系
Windows --- メイリオ

font-family: Futura, 'Century Gothic', 游ゴシック体, YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN'

Windowsの方はまだ書かないですよ。
Macの方を先(ry

ここまでで
Mac --- 第一欧文「Futura」第一日本語「游ゴシック体」第二日本語「ヒラギノ角ゴ ProN W3」
Windows --- 第一欧文「Century Gothic」日本語未指定

ともかく欧文書体の方を真っ先に指定してくださいね。
でないと日本語フォントはアルファベットも抱えていますので、その書体が優先になってしまいます。
欧文書体を先書く、というのはそれが理由です。
欧文フォントに日本語は含まれませんが、日本語フォントにはアルファベットが含まれます。

Windowsの日本語第一・第二優先フォントを指定
第一が游ゴシック、第二がメイリオでしたかね。確か (ぇ？)

font-family: Futura, 'Century Gothic', 游ゴシック体, YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 游ゴシック, 'Yu Gothic', メイリオ, Meiryo

ここまでで
Mac --- 第一欧文「Futura」第一日本語「游ゴシック体」第二日本語「ヒラギノ角ゴ ProN W3」
Windows --- 第一欧文「Century Gothic」第一日本語「游ゴシック」第二日本語「メイリオ」

最後に総称ファミリーを指定
総称ファミリーというのは
個々のフォント名のことではなく、フォントの見た目の分類です。
ここまでに指定されたフォントがどうにもこうにも一つもOS内に見つからない、という場合、最終的にこれを参照します。
どのブラウザでも以下の総称ファミリーをそれぞれ指定可能ですので、それを参照します。
この最終地点は既にページ管理人の手の内にはあらず。
閲覧者個人環境による表示です。

serif とは「髭」のことです。
I, m, f, r の上や下にチョンチョンって横線っぽいのが付いてますよね。

sans は英語で言うところの「none」
つまり「髭なし」

● fantasy (読み方: ふぁんたしー (日本語的にはふぁんた「じー」)) --- 装飾体

で、今回の流れから行きますと、最初の欧文フォントはいずれも「sans-serif」に分類されますので

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

これで締めくくりです。
最後は ; (セミコロン) を忘れずに付けます。

フォント名を囲うクォーテーション

フォント名の文字列間に半角スペースが無いものについては不要ですが、混乱を招くと思われる場合には全てのフォント名を囲っても問題ありません。
全てクォーテーション無しはダメですが、全てクォーテーション有りはOKです。

特定のテキストのみフォントを変更した場合

これは上手くやらないとミスに繋がりますー (´・ω・｀)
例えば body への指定がここまで作業した内容だとします。

body {
  font-family: Futura, 'Century Gothic', 游ゴシック体, YuGothic, 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 游ゴシック, 'Yu Gothic', メイリオ, Meiryo, sans-serif;
}

body に指定されているということは、これが全ての基本になります。
どの部位もこの指定に倣います。
特定要素に対し変更を加えるならば、

.contents {
  font-family: 'Avenir';
}

こう書いたとしますよね。
Avenir (読み方: あぶにーる) というフォントは欧文フォントで Windowsには有りません (Macには有ります)
欧文フォントは日本語を持っていませんよね。

仮にこのフォント指定をした箇所に日本語のテキストが存在していたとします。

<div class="contents">Hello あいうえお</div>

Macの場合
「Hello」はAvenirフォント、「あいうえお」は Avenirでは表示できないのでブラウザ設定を参照します

Windowsの場合
Avenirフォント自体が存在しないので「Hello」も「あいうえお」もブラウザ設定を参照します

わかりますかね？ (´・ω・｀)
body には游ゴシック体やらなんやらと日本語フォントの指定がありますけれど。
個々にフォントを指定した箇所については、指定フォントが存在しない場合には body への指定まで巻き戻しての参照してはくれません。
何故ならCSSの同一項目(同一プロパティ)指定というのは基本的に「上書き」だからです。
後方の指定が前方の指定を上書き = 書き換えしているわけですね。
なので上手にやらないと「日本語フォントがここだけめちゃくちゃ浮いている」
といった事態に陥ります。
Windowsパソコンでブラウザ初期設定フォントが「MS Pゴシック」だったりしたら最悪です(笑)

個々にフォントを指定する際はここまでと同じ流れで欧文フォント・日本語フォント・OS別優先順位を考えながら指定します。
この部分はアルファベットと数字しかないから大丈夫！
という場合でも、Mac/ Windows の振り分けは必要です。

FC2エディターでのフォント変更

旧投稿画面にはフォント種の変更ツールが有ります。

Wを押してウィジウィグ(見たまんま編集)に切り替えると使えるようになります。
指定フォントは以下の通り。

MS Pゴシック --- Windowsのみ --- 日本語
ヒラギノ角ゴ Pro N --- Macのみ --- 日本語
Osaka --- Macのみ --- 日本語
Arial --- 共通 --- 欧文
Comic Sans ms --- 共通 --- 欧文
Courier New --- 共通 --- 欧文
Tahoma --- Windowsのみ --- 欧文
Times New Roman --- 共通 --- 欧文
Verdana --- 共通 --- 欧文

このような「Macにはあるよ」「Windowsにはあるよ」「両方にあるよ」
さらには「これは欧文フォントなのでこれまでの日本語フォント指定は破棄されちゃうよ」
といった情報はどこにも書いてありませんので、
例えばWindowsユーザーさんが記事を書かれる際に「ヒラギノ角ゴ Pro N」を何気なく選んだとします。
すると
「あ。なんかフォント変わった。ヒラギノってこんな書体なんだー (▪⌔▪)」
と思ったとしても、それはヒラギノではありません。
ヒラギノはMacでしか見られませんので「変わった」と思ったのはあなたのブラウザの標準フォント設定がテンプレート標準フォントと違うだけです。
そしてその部位につていは、
あるMacユーザー閲覧者にはヒラギノで表示され、またあるWindowsユーザー閲覧者にはMS Pゴシックで表示されているかもしれません。

イタリック体について

基本的に日本語フォントに「イタリック」の概念はありません。
欧文書体は当たり前に傾けることができますが、あちらではどんな時にどんな意味合いでイタリック(あるいはオブリーク)として傾けるか、という用途のルールもあります。
でも日本にはそういう文化はない (´・ω・｀) … ですよね？(不安)
ともかく日本語は傾けられるように出来てないんですよ。たぶん。いや絶対 ←

日本語フォントが傾けられるかどうかは、
リリースメーカーが斜体を併せて作ってくれているかによります。
ですから傾けようとして
<i>文字を傾ける</i>
こうして書いたとして。
「できねーじゃん (;`ｰ´)o」
となったとしても、それはフォントのせいじゃない。
ましてテンプレートのせいでもないし、FC2のせいでもないし、リリース元のせいでもない。
強いて言えば知らなかったあなたのせい (▪⌔▪)
斜体を用意しないリリースメーカーがクズなのではなく。
斜体を用意してくれているリリースメーカーが親切なのです。

メイリオは傾けられません。
游ゴシック体は傾けられます。
参考までに。

まとめ

フォント種変更というのは割りと気軽にというか「簡単なカスタマイズ」だと思って行う方が多いのですが。
実際には一番気をつけなきゃいけないところだったりします。
中には
「フォント指定なんぞするんじゃあないッ。ブラウザの任意個人設定があるのだから、その意思を踏みにじる行為だッ。」
という方もいらっしゃいますよ。
でもね。
デザインってそんなもんじゃない
って思う。個人的に(笑)

最後にMac/ Windowsの共通欧文フォントを一部載せておきますので参考になればと思います。
日本語共通フォントはほとんどありません。
游ゴシック体ぐらいです (´・ω・｀)

Arial/ Arial 1234567890
Arial Black/ Arial Black 1234567890
Georgia/ Georgia 1234567890
Courier/ Courier 1234567890
Courier New/ Courier New 1234567890
Comic Sans MS/ Comic Sans MS 1234567890
Impact / Impact 1234567890
Trebuchet MS / Trebuchet MS 1234567890
Verdana/ Verdana 1234567890
Times New Roman/ Times New Roman 1234567890