デスクトップPCを操作する男性の画像

游ゴシックが読みにくい?font-familyで解決!【Webフォント】

2019年2月11日追記

当ブログで使用しているWordPressテーマ「Godios.」にはカスタマイズ機能として、「フォント」という機能がデフォルトで用意されており、「Noto Sans Japanese」を選択することで半角文字の読みづらさは解消されました。
完全に見落としていました、申し訳ありません。

Godios.のフォント切り替え機能

当記事を取り下げることも考えましたが、CSSの編集方法といった部分は有用性があると考え、一部分に修正を施し、このまま継続して掲載することと致しました。

これまでに当記事を閲覧してくださった皆様、そして何よりGodios.テーマ配布元のSimmon様に多大なるご迷惑をおかけしたことをお詫び申し上げます。

どうも、渋木です。

なかなかコンスタントにブログ更新が出来ていないんですが、今のところ週5フルタイムでオフィス勤めしてるだけ偉いと思うので、プラマイゼロって感じです。ポジティブシンキングで精神安定を図ります。ええ。

今回はこちら。

当ブログは無料配布テーマの「Godios.」を使用しているんですが、何故かAndroid端末(iPhoneは未確認。持ってないので。)だと半角英数字が細くて見づらくなっていたんです

こうなるとデザイン云々以前の問題で、記事の可読性と同時にユーザーエクスペリエンスがダダ下がりに・・・。

早急に解決したかったので、色々ググったりTwitterで有識者の皆様のお知恵をお借りした結果、どうにか解決出来ました。

結論から申し上げます。ずばり。


「font-familyを編集する」

です。

やることは決まりました。ではその方法は???

大丈夫です、順を追って説明します。ちなみに、当ブログはWordPressにて運用してますので、WordPress利用者の方向けに話していこうと思います。

先に謝っておくと、確実にこれだ!という原因を特定することは出来ませんでした・・・。
WEBフォントに関する色々な記事を漁ってみて分かったことですが、そもそも「游ゴシック」というフォント自体がブラウザやOSによって想定外の見た目になる事態が多発しがちな、少々扱い辛いシロモノのようです。

2018年流行?font-familyのオススメ設定はこれ!【CSS】

日本語表記以外に「Yu Gothic」といった英字向けの指定法もあるらしいのですが、最近ではfont-familyにおける游ゴシックの使用を避ける方も多いみたいですね。

Godios.親テーマcssファイル内の、font-familyの記述

上記のようにbodyセレクタにがっつり”Yu Gothic”が優先した形で指定されていました。
気になるのは「-ms-high-contrast」という表記です。

↓こちらの記事が大変参考になりました。

-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由

結論から先にいうと、そもそも IE 向けの CSS ハックとしてこの手法は不完全なので、使ってはいけない。

JeffreyFrancesco.org
https://jeffreyfrancesco.org/weblog/2017042601/

色々と要約すると、Windows10にはハイコントラストモードという特殊画面モードがあるらしく、css上でハイコントラストモード時の切り分けを記述する際に用いられるライフハック、いわゆる裏技的なコードの書き方のようです。まあ裏技ですから不具合が起きても仕方ないのかも。。。

おそらく私が使用しているAndroidスマホでは、Godios.側の裏技記述の影響で半角英数字の細文字現象が起きているのかも、と推測しました。実際それが原因なのかは不明ですが大体の目星はついた形です。

手っ取り早い解決策として挙げられるのが「font-family」の修正です。

既存のcss内でfont-familyが指定されている箇所があれば、そこを良い感じのフォント指定で上書きしてあげればいいのです。

しかし、WordPressでのcss修正にはいくつかの注意が必要です。

まずはfont-familyを指定すべきセレクタ(bodyなど)を確認しましょう。ダッシュボード内の「外観」から「テーマの編集」を選択します。

WordPressダッシュボード内、「テーマの編集」ボタン

cssファイルは親テーマ内に格納されています。

WordPressテーマヘッダーファイル

するとcssを確認できる編集ボックスが開きます。

Godios.親テーマのcssファイル

しかし親テーマではcssを編集しないことをお勧めします!

理由としては、親テーマは提供元でアップデートが入ると、ダッシュボード内での更新時に最新版の内容に上書きされてしまったり、編集保存時の不具合でテーマファイルごとデータが吹っ飛ぶ可能性があるからです!

恐ろしすぎますよね・・・!しかし、WordPressでは割と珍しくない頻度で上記の事象がユーザーから報告されています。。

なので、cssの追加や編集は子テーマ、もしくはテーマ内にカスタマイズ機能がデフォルトで実装されている場合は、迷わずそこで行うようにしましょう!親テーマの不用意な編集で最悪の場合データベースがご臨終するかもしれませんからね!

WordPressダッシュボード内、「カスタマイズ」ボタン

どうしても親テーマでの編集を考えている人は是非バックアップを取るようにしましょう!ちなみに私は「UpdraftPlus – Backup/Restore」というプラグインを利用しています。自動でバックアップ取ってくれるので便利です。

さて、Godios.には追加cssを書き込める画面が標準で搭載されています。こちらに好みのフォントをfont-familyで指定しましょう。

カスタマイズ機能、「追加css」ボタン

今回私は 2018年流行?font-familyのオススメ設定はこれ!【CSS】 で紹介されている「Lato」や「Noto Sans JP」優先の記述を採用しました。

css上書き
/* font-family上書き */
@media all and (-ms-high-contrast: none)  {
    body {
        font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
    }
}
@media all and (-ms-high-contrast: active) {
    body {
        font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
    }
}

body {
  font-family: 'Lato', 'Noto Sans JP', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic Medium', YuGothic, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
}

“-ms-high-contrast”の記述そのものを親テーマから削除するか悩んだんですが、やはりクラッシュが怖いので大人しく全面的に上書きすることにしました。
一応スマホでの見た目のビフォーアフターをお見せすると・・・(↓左ビフォー、右アフターです)

font-family編集前の文字の様子
font-family編集後の文字の様子

どうですか?大分読みやすくなりましたよね。

皆さんも文字が見にくかったりする場合はfont-familyの編集を検討してみてください!

その際、WordPressで配布テーマを利用されている方は、

  • cssは親テーマでは直接編集しない
  • 必ず子テーマ、もしくはカスタマイズ機能部分で編集する

この2点に気を付けてくださいね!