ブログのフォントをWindowsにもMacにもインストールされている游ゴシックに変えてみた

この記事は約9分で読めます。

このblogは2年前の3月から書いていますが、当初に設定して以来font-familyを変更していませんでした。当時としてはこれがベスト!と思われる設定でした。
先日、WindowsにもMacにもインストールされている游ゴシックというフォントがあることに気づきましたのでそろそろfont-familyも変えてみようということで変更してみました。

font-familyで指定したフォントは各PCに入っているフォント

今(原稿を書いている)現在、このblogのfont-family

[ryus_blogcard url=”https://usortblog.com/twentyfourteenfont/”]

で指定したままとなっています。つまり、

font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;

です。font-familyで指定したフォントは、このblogをみてくれる人のPCなどが持っているフォントで表示されるためMacなら「ヒラギノ角ゴ ProN W3」で、Windowsなら「メイリオ」で表示されることになります。私がいつも使っているのはWindows10なのでメイリオでblogは表示されています。

WindowsでもMacでも同じフォントで表示したい場合は

[ryus_blogcard url=”https://usortblog.com/webfont/”]

で書いたようにWebフォントを使うことで実現できました。この方法ならWindowsでもMacでも同じフォントで表示できますが、設定が面倒だったりフォントが有料だったり、読み込みが遅くなったりします。

游ゴシック とは?

そこで游ゴシックの出番となります。游ゴシックはWindows8.1、MacではOS X Mavericksから標準搭載されました(その他に、游明朝もはいっています)。

それまではWindowsとMacに共通するフォントがなかったためにそれぞれ別のフォントで表示していたWebサイトも比較的新しいPCであれば同じように表示されるということになります。

游ゴシック、游明朝その他2書体をまとめて游書体という書体ということです。

游書体-Wikipedia

このWikipediaをみると、「字游工房初の独自書体」ということだそうです。字游工房さんのWebサイトを見るとそれまでもかなり実績のあるフォント制作会社さんのようですが、はじめて作った独自書体がMacOSやWindowsに取り入れられるってすごい!なんだか映画になりそうな、気がしました。

font-familyに游ゴシックを追加してみてみる

font-familyに游ゴシックを追加してみます。子テーマのstyle.css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

となっているfont-familyに

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-family: "游ゴシック", YuGothic,Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

游ゴシックを追加しました。

今までは、

このように表示されていたものが、読み込み直すと

ちょっと線が細く、上品な感じ?のフォントになりました。

chromeだけ、色が薄くなってしまう問題を解決

先ほどのスクリーンショットはFirefoxでみたときのものなのですがChromeでみてみるとなんだかフォントが薄い?感じがします。

わずかですがChrome(とVivaldi)で見たときだけ薄いです(Edge,IEでは感じませんでした)。

これについて検索したところ、

Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い?

という記事を見つけました。どうもやっぱりChrome(とVivaldi)だけfont-weightが違う解釈になってしまうようです。

ということで、

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-family: "游ゴシック", YuGothic,Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
    font-weight:500;
}

文字の太さを指定する font-weight:500; を追加してみました。

再度読み込み直すと、

と、ChromeやVivaldiで見ても文字が薄すぎない状態になおりました。

問題発生!このblogで多用しているstrongが太文字にならない…

と、これで解決した…と思ったところ問題が発生しました。font-weightを指定する前

このように太文字で表示されていた

Lightningの<strong>子テーマ</strong>は作成元である株式会社ベクトルさんが準備してくれています。

strong指定した文字「子テーマ」が、

なんということでしょう(;;)、太文字にならなくなってしまっています。うーん。

試しにfont-weight指定を外すと元のように太字になるので、どうもこの指定方法だとstrongで太文字にできなくなってしまうようです。。。

いろいろな情報でみなさんfont-weightで修正しているのでもしかするとtwentyfourteenの子テーマでなければ、大丈夫なのかもしれません。あるいはみなさんあまり strong を使われていなくて、この問題は気にならないのかもしれません。

しかし、太文字を多用している(^_^;このblogだと大きな問題になってしまいます。

フォントを游ゴシック Mediumに変更する

さて…と思って色々検索をしてみました。そしてこの記事を見つけました

Windowsの游ゴシックをfont-weightを使わずにMacに合わせる方法

ここに書いてあるようにWindowsをMacに合わせたいということではなかったのですが、試しにこの方法を取り入れてみました。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-family: "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", YuGothic,Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

font-familyに “游ゴシック Medium”, “Yu Gothic Medium” を追加して、font-weightは削除しました。

これで読み直してみたところ、

文字の色も細すぎず(游ゴシック Mediumが指定してあるため)、strongが太字で(font-weightを指定してないため)表示されるようになりました。

まとめ:太字を多用しているWebサイトで游ゴシックを使うときは注意?

まだtwentyfourteenでしか試していないので、確かなことは言えないのですが游ゴシックをfont-familyで使うときは

・ChromeやVivaldiで文字のweightがなぜか低くなり 薄く見える
・かといって全体的にfont-weightを指定するとstrongが太文字にならなくなる(かも?)

ので、

・今時点で游ゴシックをfont-familyに追加するときは “游ゴシック Medium”, “Yu Gothic Medium”,”游ゴシック”, YuGothic,
 を指定するのがよさそう

ということかなと思います。

* 2016/07/31 追記:やっぱり游ゴシックより元々の表示の方が RYUS blogっぽい気がして、元に戻しました(^_^;

[amazon_searchlink search=”css”]

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ 全般 フォント インターネット
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。