【手っ取り早く解決】アンドロイド端末でフォント(明朝体)を表示させる方法

シバ男

こんな疑問にお答えします。

本記事の内容

アンドロイド端末には、フォント(明朝体)がインストールされてません。

CSSでフォント(明朝体)を指定しても、「ゴシック体」で表示されてしまいます。

See the Pen
YzWXbBX by march (@march-rys)
on CodePen.

まーち

こんなん知らないから、ハマりにハマったよね、、。

解決策として、Webフォントを使用すればアンドロイド端末でもフォント(明朝体)を表示させる事が可能です。

Webフォントを使って、フォント(明朝体)を表示させる方法を解説していきます。

アンドロイド端末で、フォント以外のデザインが崩れてる場合はこちらの対処法をどうぞ

✔Webフォントって？

インターネット上で提供されるフォント

Webページの読み込みと同時に、インターネット上にあるフォントデータを呼び出すことが出来るので、どんなデバイスでも指定したフォントで表示できます。

Webフォント「Google Fonts」を使ってアンドロイド端末にフォント(明朝体)を表示させる

✔Google Fonts

Google Fontsは、無料で使えて初心者でも簡単に使えるサービスです。

導入手順もかなり簡単で、手っ取り早く明朝体を表示できます。

Google Fontsへは以下のリンクからどうぞ。

外部リンクGoogle Fonts

シバ男

あのまーちが言うくらいだから、むっちゃ簡単なんだね

まーち

うるさいよ、、、。

以下の通り進めて頂くと簡単に使えます。

STEP1
Google Fontsに移動
まずは、Google Fontsに移動します。
STEP2
明朝体のフォントを選択
「Noto Serif JP」を選択する。

※「Sawarabi Mincho」でもO.K
STEP3
使用する太さを選択
「+select this style」を選択し、使用する太さ(font-weight)を選択します。

※読み込みが遅くなるので、使わない太さは選択しないほうが良い
STEP4
cssの読み込みコードを書く
右側のEmbedを選択。<link>に記載されているコードをhtmlの<head>内に書き込みます。
STEP5
cssを書き込む
「CSS rules to specify families」に記載されてるコードをcssに記載する。