フォントがゴシック体にならない原因はfont-familyの設定ではない【CSS】

 CSS, HTML, IT, 
ブログやホームページが見やすいか?
気にしていない方はそれほどいないだろう
(メモ代わりにしている方は別として)

自分のブログをスマホで確認するが、他のブログと何かが違うな、と感じていた。
よくよく見ると明朝体の細い文字だった。

見てくれる相手の事を考えると、ゴシック体の方が見やすいらしい。
ということで、bodyタグ内にfont-familyを設定すれば良いらしいので、さっそく設定をしてみたが変化が無い。。。

実は<html lang="ja">の指定がまずかったようだ。


調べ始めたきっかけ




なるほど、ゴシック体が無難なのか、たしかに色んなサイトを見ると、ゴシック体だ。日経新聞などの格調高いサイトは逆に明朝体を使って違いを打ち出しているようだ。

CSS詳しくないけど雰囲気で直しにかかる



フォロワーのおおもとさんの助言も受けて、font-familyを触るが変わらない。


body {
  font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',"游ゴシック",YuGothic,'Yu Gothic','メイリオ', Meiryo,'MS Pゴシック','MS PGothic'
}

誤って表示できないフォントを指定しているわけではない。
とにかく、以下のワードで検索してみる

「font-family」 「ゴシック体」 「ならない」

でも、出てくるのは、Macなら、「ヒラギノ角ゴシック」、Windowsなら「游ゴシック」にしておけという内容ばかり。

私のiphone6s、iosのバージョンが10.3.2だから?

と思ったが、バージョンが11でも明朝体のまま。
safariも、Chromeも同様。

とあるサイトでは、本体の設定を個別に直すしかない、と書かれているが、古い記事でその設定画面もない。

ついでに、アンドロイド搭載の、Xperiaで見たがこっちも同様。

イライラして、色々触りすぎる。
で、<HTML lang="ja"> を消した。

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' lang="ja">

すると、表示が改善されて念願のゴシック体になった!!

検索結果への影響(SEO)はどうなる

消したら直ったので、はい解決、良かったね。
で、終わればよいが、別の影響が出ないか確認した。

ぱっと思いつくのは、文字化け。
文字化けは、自分の環境で数件確認したので、ひとまず問題なしということにした。

検索結果への影響(SEO)は、lang属性を消したらどうなるかについて、調べてみたら、公式発表を翻訳しているサイトがあった。

lang属性について
「適切に指定することで、プログラムによる自動翻訳などが容易になるかもしれません」
とある。

が、しかしこの、lang属性を、Googleは全く無視している。

Google「言語指定にlangは使うな」/公式発言

まとめ

君のブログ、スマホで確認したらどう見えるかな?
HTMLヘッダの、langを検索してみよう。

コメント