【ザ・トール】フォントの設定がスマホに反映されない場合の対処法

フォントの設定がスマホに反映されない

ザ・トールでフォントの設定をしたけど、スマホのフォント表示に反映されない事象です。なんで!?とはまってしまった内のひとりですが、これから紹介する方法で解消できました。

フォントの設定内容

まずカスタマイズ画面でどのようなフォント設定をしているのか確認してみましょう。

以下の画面で設定内容を確認できます。

カスタマイズ画面 > 基本設定 > 基本スタイル

・スマホ全体のフォントサイズ:中
・PC全体のフォントサイズ:中
・全体のフォントファミリー:メイリオ

パソコンのフォント表示

次にパソコンで表示した場合のフォント表示を確認してみましょう。

こちらはメイリオのフォント設定は反映されています。

パソコン表示フォント

▼(余談)リトープスの種まき記事が気になっちゃう方はこちら
リトープス 実生 【種まき編】

【問題点】スマホのフォント表示

さて今回の問題点です。スマホで表示した場合、きみ、明らかにメイリオさんじゃないでしょ。ねぇ。という事象が起こりました。ちなみに表示したスマホはiPhoneのSafariです。

実際のスマホ画面がこちら。
フォント確認スマホ

解決策:HTMLでフォント設定を削除

記事を投稿するときに改めてフォントの設定をしていませんか?HTMLコードを確認するとわかりやすいのですが、HTMLに記載しているフォント設定のコードを削除することでこのスマホ表示問題が解消できました。それでは詳細を解説します。

確認ポイント

ブログ記事内の文章は、【クラシック】を使って作成していますので、今回は下の画面を使って説明します。

HTML編集

①部分のフォントファミリーには何が設定されていますか?
→わたしの場合、ここでも【メイリオ】のフォントを指定していました。
②をクリックして、実際のHTMLコードを見てみましょう
③の「HTMLとして編集」をさらにクリックします。

HTMLコード

HTMLコードの中にフォントをしている部分を探しましょう。

色が付いている部分が、フォントの設定をしているコードです。
検索を使うと便利です:「Ctrl」キー+「F」キーHTML

HTMLのフォント設定を削除

HTMLのフォントを指定しているコードはありましたか?
(例)style=”font-family: メイリオ, Meiryo;”

今回はこの対象のコードを全て削除します

▼削除後
削除後

スッキリしましたね。これで更新をして、スマホでフォントの表示を確認してみましょう。

設定値を変更した結果

HTMLからフォント設定コードを削除した後、スマホでフォント表示を確認してみましょう。無事にメイリオのフォントで表示することができました。めでたし。めでたし。

実際のスマホ画面がこちら。
フォント確認スマホ

なぜフォント設定が反映されなかったのか

いろいろと試してみましたが

カスタマイズ画面:メイリオ
HTMLコード:メイリオ以外のフォント

上記の設定だと、メイリオ以外のフォントがスマホに反映されました。メイリオの2重設定がいけないのか、その他の設定が悪さをしているのかまでは追い切れませんでした。

もしスマホのフォント表示でお困りの方がいましたら、ひとまず今回ご紹介した設定を一度試してみてください。

参考:動作環境

当ブログの動作環境はこちらを参照ください。
ことりのコノ子 ブログ情報