【WordPress使い方】PCとスマホでフォントが変わってしまう?【疑問】

ホームページのフォント

見やすいと思ってもらえるホームページにするためには文字のフォントや大きさが重要だと思います。
初めてワードプレスでホームページを作りだした頃に、PCとスマホでフォントが異なる、という状態になることが多かったので、そんな疑問が出てきた際に参考にしてみてください。

フォントの変更

ワードプレスでホームページを作る際はテーマを選択して作ることが多いので、テーマでぞれぞれ決められた設定のまま使うことも多いと思います。
しかし実際にホームページを作っていると、PCではゴシックに設定したのに、携帯から見ると明朝体で見える、ということがサイトを作ると頻繁にありました。
その時はCSSでフォントの設定部分を確認しても明朝体の設定は入れていないのに、表示は明朝体でした。

その時は以下のように、ゴシック体にするためにメイリオとだけいれていました。
しかし、フォントの種類が1種類だけではもし表示する端末に同じフォントがない場合、端末にあるフォントに変わってしまうようでした。

今回使ったCSS

/*font*/
body {
font-family: “メイリオ”;
}

上のCSSだけですとメイリオがなければゴシック体のフォントで出せないため以下のように代替えフォントも書いておきます。

/*font*/
body {
font-family: 'Yu Gothic Medium', '游ゴシック Medium', '游ゴシック体', 'Yu Gothic', 'メイリオ','MS Pゴシック'
}

こうすることでもし見る端末に同じフォントがない場合でもゴシックか明朝かは揃えられるようになります!

WordPressやサイト作り初心者の方へのおすすめの記事はコチラ!

【wordpress】サイトに人気記事を表示させる理由と方法【プラグイン】

WordPressとスマホについてはコチラの記事も!

【WordPress】サイトの表示をスマホ向けにする【CSS】

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です