Twenty Seventeen、フォントを最近よく見る”Yu Gothic”へ変更

“Yu Gothic”は、最近ウェブ記事でもよく見かけるようになったフォントで、凄く見やすいので、気になっておりました。ワードプレステーマ、Twenty Seventeenでテストしてみたら、読みやすさが格段に上がったので、そのまま使い続けることにしました。

Twenty Seventeenへの追加方法

外観→テーマの編集→Twenty Seventeenの子テーマ→Stylesheet.cssにて変更します。

Twenty Seventeen フォント設定
Twenty Seventeen フォント設定
  1. “Font-family”で検索すると20箇所以上検索にかかってきます。
  2. 後半に各言語の設定箇所があるので、Typography for Japanese Fontの部分を探します。
  3. フォントの先頭は、”Hiragino Kaku Gothic Pro”になっていますので、その手前に“Yu Gothic”, “游ゴシック”,を追加します。
  4. 後は「ファイルを更新」をお忘れなく。

1は、Font-familyで検索することによって、他のどんな箇所でフォントが指定されているかが分かりやすいです。私はあえて個別指定箇所は変更しませんでした。
特にHTMLコードなどを記述する際に使っているpre要素は、Font-familyをmonospaceのままにしておく方が無難な気がします。違うフォントだと違和感がでますから…

3では、Yu Gothic非対応のデバイスもあるみたいなので、Hiraganoや他のフォントを残しました。フォント名に空白がある場合やアルファベット表記でない場合は””(ダブルクオーテーション)で囲んでくださいね。

iEでの見た目

Yu Gothic インターネットエクスプローラーでの表示
Yu Gothic インターネットエクスプローラーでの表示

ん。キレイです。
フォントを変更しただけでページの印象がガラッと変わりました。

Chromeでの見た目

Yu Gothic クロムでの表示
Yu Gothic クロムでの表示

ん。いいんじゃないかな?

“Yu Gothic”は、かすれて汚い??

Yu Gothicは、ブラウザやデバイスによっては、かすれて見えるとか、汚いなどの記事が散見され心配していたのですが、意外と普通じゃない?っと思い暫くこのまま使ってみることにしました。

対策としてfont-faceやfont-weightを調整する方もいらっしゃるようです。
font-weightについては最低500を奨めている記事を見かけましたが、Twenty Seventeenは元の設定が700なので敢えて減らす必要もないだろうと、そのままにしました。

でも、私のパソのスクリーンは4Kなのでキレイに見えるだけかもしれません。iPhoneでもきれいに見えました。

投稿者: のろのろ

ブログのカスタマイズをしては、備忘録を書いています。2017年4月にワードプレスデビューし、試行錯誤しながら寝落ちする感じのへなちょこブロガーです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください