スマホサイトで明朝体系フォントを使ってみたい


最近クライアントに飲食店さんが増えてきていまして、飲食店さんの中にロゴを明朝体系のフォントを使っているお店が多いのでWebサイトのフォントも明朝体で統一したいなぁっと思っているGucciです。

Webサイトを作る際にフォント指定はCSS(StudioAKではSCSSで書いて最後CSSにCompileしています)で指定するのが普通です。

それはPCサイトもスマホサイトも基本は同じことです。

まだHPが薄明期でCSSなんて???みたいな時代ならまだしも、2017年の現代でCSSでフォント指定のやり方がわからないWeb制作会社さんとかいるわけないじゃん!って思うでしょ?

そんな早とちりな人に聞いてみたい

それは本当ですか?

なに?なに?って思った人もいるかと思いますが、

世の中にはスマホというのを大きく分類すると

iPhoneとAndroidにわかれます

日本ではiPhoneの方がユーザーが多い傾向なため、気づかない人も多いのですが、

実は。。。

Android第6世代と言われるAndroid 6.0 (Marshmallow)には、明朝系のフォントが実装されていません。

そのため、CSSに普通にfontやfont-familyで明朝体を設定してもそもそもOSにそのフォントが入っていないため明朝体で表示できません。

Android6のシステムフォントは「Noto Sans CJK」と、呼ばれる角ゴシックになります。

Android向けのWebサイトで明朝体が使いたいとおもったら、

Googleが発行しているWebフォントを使うことになります

https://googlefonts.github.io/japanese/

Webフォントは最近はPCサイトでもデザインの一環として使っている人も増えていると思います。

同じように使うだけなので難しくはないですかね。

落とし穴はiPhoneでは明朝体が出てるからAndroidでチェックしなかった場合出てないという事実に気づかないということです。

スマホサイトのチェックは必ず両OSでやるようにしましょう