Google Fonts+日本語「Rounded M+ 1c」が急にキレイに表示されなくなった

2017年7月2日2023年10月16日

URLをコピーしました！

1ヶ月ほど前に「Google Fonts+日本語」を取り入れて、
大満足のカスタマイズができたと記事も書いたけろら～です。

文字がにじんで見づらい

今まで、キレイに丸みを帯びていたはずの「Rounded M+ 1c」が以下のように表示されるようになりました。

画像にしちゃうとまだマシに見えるんですけど、
ブラウザ（Win+Chrome）上だと実際にはもっとかすれてて、「汚い」んです。(-。－;)

Chromeの不具合なのかなと思ったのですが、Edgeで見てもフォント表示は変わらず、、、。

で、、、

iPhoneからブログを見てみると、、、
う～ん？表示汚くなってないぞ？

原因は？

って事は、Windowsだから、、、？

ググってみるも、、、同じ現象で記事を書かれてる方は見当たらず、、、。(T-T)

試しに「Rounded M+ 1c」以外の他のフォントで試してみたところ、普通に表示されるんですよね。

って事は、、、？

もしかしたら、フォントのサイズ指定の問題なんですかね～。
「Rounded M+ 1c」は、小さい表示には向いてないって事なんですかね～。

でもなぁ、、、最近特にCSSファイルも触ってないんですよね～。

今までちゃんと表示されていたものが、急に、、、という感じなので、
もう、、、ホントどうしていいかわからないです、、、。[壁]/_;)シクシク

ググった中から、有効そうなCSS指定とかも入れてみたんですけど、どうも上手くいきません。

とりあえず、本文、サイドバーの一部のフォントサイズを前より大きく指定してみたら少しは見やすくなったかと思うんですけど、やっぱり前とはなんか違う感じです。（やっぱり、サイズの大きさが原因と思われます。）

思い切って「Google Fonts+日本語」をやめればいいんでしょうけど、、、
iPhoneでは読みやすいんですよね～。

う～ん、、、どうしよう、、、。(w＿－;

どうにか良い方法を探せないか、しばらく模索してみます。

（~~私の環境のみだけだったら良いのですが、、、~~他の方も同様とのコメントいただきました。）
~~PCで訪問して下さった皆様、、、読みづらくて申し訳ないです。~~以下、CSSで調整しました。ワタシと同じ環境であれば、にじみは多少改善されるかと思われます。

2019/1/20-追記：結局CSSで調整

ずっと気になりつつも、ずっと放置してましたが…
一時的（？）な解決法としてにじんでる箇所の文字の大きさをCSSで調整しました。

該当の箇所を反転（選択）し、Chromeの「検証」で開く
「font-size」を指定しているclass名を探す
子テーマのstyle.cssにCSSを追記

「検証」表示には、3つの方法があります。

右クリック→「検証」を選択
ショートカットキー：Ctr+Shift+I
F12ボタンを押す

Windows10+Chromeユーザーでは、多少解消されましたが、
Firefoxでは、字が小さめなところは、やっぱりダメでした。

う～ん…もうどうしたらいいんだろう…。
※モバイル（iPhone）からだと全然問題ないんですけどねぇ。(T-T)

以下、Chrome環境での表示確認で、調整したCSSです。（テーマ「Cocoon」利用）
フォントのサイズは、すっごく小さくするか、丸みを帯びる最小の数値を指定してます。

Cocoon設定＞サイトフォント＞文字サイズ→「18px or 17px」の設定が前提の調整です。

/* ---------------------------
  文字にじみ対策（サイドバー文字の大きさ）
  ------------------------------ */ 
.nwa .author-box .author-content {
      font-size: .98em;
  } /* プロフィール内容 */

 .author-box .author-description {
      font-size: .98em;
  } /*プロフィール内容　*/

 .widget-entry-cards .widget-entry-card {
      font-size: .72em;
  } /* エントリーカード（記事タイトル） */

 .recent-comment-info {
     font-size: 17px;
 } /* コメント投稿者 */

 .recent-comment-content {
     font-size: .7em;
 } /* コメント内容 */

 .recent-comment-info, .recent-comment-article {
     font-size: 17px;
 } /* コメント記事タイトルリンク */

 .entry-card-snippet, .related-entry-card-snippet {
      font-size: 0.95em;
  } /* ブログカード記事タイトル */

 .blogcard-snipet {
      font-size: 0.95em;
      color:#999999;
  } /*ブログカード抜粋 */

 /* ---------------------------
  その他の文字の大きさ（文字にじみ対策）
  ------------------------------ */
.toc {
  font-size:0.95em
  } /* 記事の目次 */

 .carousel-entry-card-title{
      font-size:12px;
      font-weight:normal;
  } /*カルーセル記事タイトル */

まだ、にじんでる箇所も見られますが、そこは、もう放置…の予定です。(^▽^;)

ブログ全体のフォントサイズを「20px」あたりにすると、サイドバーあたりがにじまないサイズになるんですけど、それだと記事ページの文字が大きくなってしまうんですよねぇ。

でも、結局、Firefoxではやっぱりにじんでたんですよねぇ。
~~なので、そのうち、Firefoxだとどこまでサイズ調整すればいいのかを検証してみる予定です。~~

結局、根本的な解決の記事にはならず、恐縮です。(^^;)
参考程度に読んでいただければ幸いです。

あと、私は現在、別フォント「Kosugi Maru」に切り替えました。
（Cocoonユーザーであれば設定から選択ができます。）
今は、すっかり「Kosugi Maru」ファンです。(^▽^;)