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

フォントはOS依存です

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

ここでは『任意ダウンロードしたフォントを所有している可能性』は無視します。任意のものについては自分のことはわかっても他者の状況までは知りえませんので、任意ダウンロードフォントを前提にするわけにはいきません。

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

所有OS内に存在しないフォントが指定されていた場合は 代替フォント が適用されますが、CSSで代替フォント指定が無ければ、各閲覧ブラウザの指定に倣います。

ブラウザのフォント指定は 任意変更が可能 なので、CSSのフォント指定が簡易・簡素であればあるほど、閲覧時の表示フォントにばらつきが生じることになります。

表示を共通化できるwebフォント

webフォントで最も有名なのは Google fonts で、読んで字のごとくGoogle様のライブラリです。こういったフォントサービスでは、一旦各サービスのサーバーにアクセスして情報を取得してから表示を行いますので、全OS, 全デバイスで表示を共通化することが可能です。つまりフォント表示の依存性問題をクリアすることが可能。

ただしその引き換えとして、通常は発生しない 表示のタイムラグ や 読み込みの負荷 が起こります。

サーバー経由の工程がひとつ増えますので、当然ページの表示速度の面に何も影響なしとはいきません。

特に 日本語 というのは世界的に見てもかなり特殊な言語の部類に入ります。なにせ「ひらがな」「カタカナ」「漢字」「アルファベット」「数字」「記号」と、これだけ多種な要素がありますので、それらを網羅すると欧文のそれと比べてものすごく情報量が多いわけです。そして日本語は欧文フォントが一文字あたり半角1B (いち バイト) であるのに対し、全角2B ですので基本容量も2倍です。

webフォントは表示にタイムラグが発生しますので、

1. webフォントが読み込まれるまで通常フォント(OSフォント)を表示しておく
2. webフォントが読み込まれるまで文字を表示させない

といういずれかの方法を取りますが、一長一短です。1の場合は FOUT (Flash of Unstyled Text, 表示切り替わり時のチラツキ現象) の発生、2の場合は単純に 文字表示が遅い という状態に。

最近では表示速度に関する取り組みも行われるようになり、以前よりも問題の度合いは小さくなってきてはいますが、webフォントの過剰な導入は避けるようにしましょう。例えば『欧文webフォントを複数導入したら日本語webフォントは使わない』ですとか、『日本語webフォントひとつと欧文までwebフォントひとつまでに絞る』など。

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

フォントには表示優先順位を設けよう

フォント自体がOS依存であることに加え、OSのバージョンによる標準搭載・非搭載 も考慮しなければいけません。め、めんどくせ… （￣∀￣；）

例えばMac/ Windows共通フォントの 游ゴシック体 は
Macでは OS X10.6 Marverics 以降。
Windowsでは Windows8.1 以降。
ですからMac, Windows双方に配慮して游ゴシック体を選出したつもりでも、Windows7をお使いの方には游ゴシック体では表示されません。

というわけで、指定フォントが「存在しない場合」に備えて Mac向けフォントを複数 及び Windows向けフォントを複数 をそれぞれ指定しましょう。

フォント指定の仕方

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

font-family: Mac最優先欧文, Mac第二欧文, Windows最優先欧文, Windows第二欧文, Mac最優先和文, Mac第二和文, Windows最優先和文, Windows第二和文, 総称ファミリー;

ヤッダー （￣∀￣；）
なにこれ正気ですか？って感じ。これでも以前よりすっきりした方です。日本語フォントには通常「日本語名」と「英字名」とがありますが、現在では 英字名 を記せばOKです。以前は両方書いておく必要がありました。

一番最初は欧文フォント指定

まず最初に指定するのは 欧文フォント です。和文フォントを先に書いてしまわないよう注意。和文フォントはアルファベットを含んでいる ので、欧文が無視されてしまいます。和文のアルファベットを利用したい場合は欧文なしで良いんですが、分けたい場合は必ず 欧文 → 和文 の順に指定します。 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固有フォントを同時にインストールしている可能性が高いので、そういう不安定要素を取り除くための『Mac指定が先』です。

font-family: Futura, 'Century Gothic'

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

記号と数字は欧文フォント

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

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

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

Mac向け最優先和文フォントを指定

今回のサンプルでは『游ゴシック体』にしようと思います。ところがこのフォント、Mac/ Windows共通ではあるものの、 MacとWindowsとで名称が違いますので注意してください。

Mac

日本語名 游ゴシック体
英字名 YuGothic

Windows

日本語名 游ゴシック
英字名 Yu Gothic

font-family: Futura, 'Century Gothic', YuGothic

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

Mac向け第二和文フォントを指定

游ゴシック体はMac OS X10.5やらでは表示できませんので、比較的古いバージョンのOSにも搭載されているフォントを探します。代表的なものは ヒラギノ系 でしょうか。ただしヒラギノも注意が必要。

注意喚起 Mac最新OS Catalinaはヒラギノ角ゴPro/ProNが未搭載に

もーやだ困るー (∵`) Windowsユーザーさんには関係ありませんが、テンプレート全般には関係あります。Mac用フォント指定の見直し のススメ。...

vanillaice000.blog.fc2.com

今回は最優先が『游ゴシック体』なので深く考えすぎず『ヒラギノ角ゴ ProN W3』を指定していきましょう。

font-family: Futura, 'Century Gothic', YuGothic, 'Hiragino Kaku Gothic ProN'

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

ここまでで
Mac --- 第一欧文「Futura」第一和文「YuGothic」第二和文「Hiragino Kaku Gothic ProN」
Windows --- 第一欧文「Century Gothic」和文未指定

Windows向け最優先和文フォントを指定

せっかくMacと共通のフォントがありますので、こちらも游ゴシックを。

font-family: Futura, 'Century Gothic', YuGothic, 'Hiragino Kaku Gothic ProN','Yu Gothic'

ここまでで
Mac --- 第一欧文「Futura」第一和文「YuGothic」第二和文「Hiragino Kaku Gothic ProN」
Windows --- 第一欧文「Century Gothic」第一和文「Yu Gothic」第二和文未指定

Windows向け第二和文フォントを指定

font-family: Futura, 'Century Gothic', YuGothic, 'Hiragino Kaku Gothic ProN','Yu Gothic', Meiryo

今回はかなり古いWindowsバージョンにも搭載されているメイリオを指定しましょう。

ここまでで
Mac --- 第一欧文「Futura」第一和文「YuGothic」第二和文「Hiragino Kaku Gothic ProN」
Windows --- 第一欧文「Century Gothic」第一和文「Yu Gothic」第二和文「Meiryo」

総称ファミリーを指定

総称ファミリー、というのは、大別して5種あるフォントグループの指定です。

総称ファミリー generic family	書体 type
serif	明朝体
sans-serif	ゴシック体
monospace	等幅
cursive	筆記体
fantasy	装飾体

総称ファミリー というのは個々のフォント名のことではなく、フォントの見た目の分類です。ここまでに指定されたフォントがどうにもこうにも一つもOS内に見つからない、という場合、最終的にこれを参照します。各ブラウザは総称ファミリーに対して同じファミリーに属するフォントの名称を指定できるようになっており、「ブラウザ毎に表示のばらつきが出る」というのはそのためです。

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

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

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

font-family: Futura, 'Century Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;

これで締めくくりです。CSSの宣言終わりには忘れずに ; (セミコロン) を付けます。

総称ファミリーにクォーテーションは付けません。

ダブル・シングル共に付けないよう注意。クォーテーションが付くと『フォント名』だと誤認される可能性があります。

混乱しそうな場合は 総称ファミリーを除く『全てのフォント名をクォーテーションで囲う』ようにしても構いません。

総称を除く全てにクォーテーション無しはダメですが、全てクォーテーション有りはOKです。

FC2ブログでしがちなこと

フォントの部分的変更

例えば body への指定が以下のものだとします。

body {
  font-family: Futura, 'Century Gothic', YuGothic, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
}

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

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

こう書いたとしますよね。
* xxx は不特定文字列です。
Avenir (あぶにーる) というフォントは 欧文フォント で Windowsには有りません (Macには有ります)
そして 欧文フォントは日本語の文字を持っていません。さらには 総称ファミリー指定すら無い といった状況です。

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

<div class="xxx">Goodです</div>

Mac

Avenir + ブラウザ標準フォント

Windows

全てブラウザ標準フォント

『ブラウザ標準フォント』というのは『総称ファミリー』とはまた別で、総称ファミリーすら指定されていない場合の最終代替です。概ね sans-serif に属する何かで表示されます。

body には 游ゴシック体やらなんやらと日本語フォントの指定がありますけれど、個々にフォントを指定した箇所についてその指定フォントが存在しない場合には bodyへの指定まで巻き戻しての参照してはくれません。何故ならCSSの同一項目(同一プロパティ)指定というのは基本的に「上書き」だからです。後方の指定が前方の指定を上書き = 書き換え しているわけですね。

なので上手にやらないと「日本語文章がここだけめちゃくちゃ浮いている 」
といった事態に陥ります。Windowsパソコンでブラウザ標準フォントが『MS Pゴシック』だったりしたら最悪です(笑)

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

FC2旧エディター(旧投稿画面)でのフォント変更

新エディター(新投稿画面)にはありませんが、旧エディターにはフォント種の変更ツールが有ります。

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

フォント名	Mac	Windows
MS Pゴシック sans-serif, 和文
ヒラギノ角ゴ Pro N sans-serif, 和文
Osaka monospace, 和文
Arial sans-serif, 欧文
Comic Sans ms sans-serif, 欧文
Courier New monospace, 欧文
Tahoma sans-serif, 欧文
Times New Roman serif, 欧文
Verdana sans-serif, 欧文

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

イタリック体

基本的に日本語フォントに『italic (いたりっく)』の概念はありません。欧文書体は当たり前に傾けることができますが、あちらではどんな時にどんな意味合いでイタリック(あるいは oblique (おぶりーく))として傾けるか、という用途のルールもあります。でも日本にはそういう文化はない (´・ω・｀)
なので基本的に日本語は傾けられるように出来てないません。

日本語フォントが傾けられるかどうかは、リリースメーカーが斜体を併せて作ってくれているか によります。ですから傾けようとして

<i>文字を傾ける</i>

あるいは

<span style="font-style: italic;">文字を傾ける</span>

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

* 現在のweb標準ではi要素は「イタリック体」ではなく「専門用語や思考」を意味しますので、フォントを傾ける目的で使用しないよう注意。

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

serifとsan-serifの混合

serifとsans-serifが入り混じった文章は読みづらいとまでは行かなくとも、なんとなく違和感のある表記になりがちです。特に欧文と和文 双方のフォントを指定する際は注意が必要です。総称ファミリー指定するフォント種を踏襲するように選びましょう。

* 便宜上 ×印 を利用していますが強い否認を表しているわけではありません。

文章としてのmonospace

等幅フォントは文章に向いているとは言えませんので、できるだけプロポーショナルフォント (proportional font) を選ぶようにしましょう。

反対に、何かしらのソースコード・プログラム言語などを記す際はプロポーショナルよりも等幅フォントが向いています。

* 便宜上 ×印 を利用していますが強い否認を表しているわけではありません。

Mac, Windows 共通欧文フォント

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

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

というわけで、フォントは自分目線だけで指定してはいけないよ。という記事でございました。