ワードプレスの字体が急に変更…なぜ?変わったフォントを戻す、または変更する方法

ワードプレスフォントを変更するためになる小ネタ

ワードプレスを開いてみたら、急に字体が変わっていて困惑した…という方はいませんか?昭和生まれの機械オンチな私は、朝からまんまと手こずってしまいました。

色々調べた結果、意外とすぐに直ったので、ここでは解決法を紹介します。またワードプレスのフォントを変更したいという場合も簡単に変更が可能です。私のように、ワードプレス超超初心者!という方はぜひ参考にしてみてください(初心者以外は参考にならないと思います)。

ワードプレスで変わった字体を戻す、変更する方法

ワードプレスを開いたらなぜか字体が変わっていたという人は、私だけではないはず。また、せっかくだからこの機会に、もっと雰囲気の違う字体にしたいという人もいるかもしれません。

色々と初心者向けの変更法を調べたのですが、初心者向けと言いながらも出てくる言葉が難しかったりして、超初心者の私にはチンプンカンプンでした(頭が悪いだけかもしれませんが…)。

その中でも、こんな私でも解決できた!という方法があったのでいくつか紹介します。

ワードプレスのテーマを更新してみる

実は私が引っかかったのは、ワードプレスのテーマが更新されているにも関わらず更新していなかったため、字体が変わってしまっていたというだけの話でした。

まずは一度、ダッシュボードの「外観」→「テーマ」→今お使いのテーマの右上をチェックしてみてください。

「今すぐ更新」となっていたら、更新するだけで直るはず。私はまさにこれだったので…。

フォントのプラグインをインストールする

テーマの更新には問題ないけど字体が変わってしまったよ…という方が一番簡単にできるのが、無料のプラグインをインストールすること。

ワードプレスユーザーの皆さんが口を揃えておすすめしているのは「Japanese Font for WordPress (旧名: Japanese Font for TInyMCE)」です。

(掲載元:ワードプレス

このプラグインをインストールし、有効化することで、手書き文字の「ふい字」をはじめとした数種類の文字が使えるようになります。私も実際にやってみましたが、手書き風の可愛いサイトに仕上げたいという女性には特に人気のようです。

初心者向け!Japanese Font for WorldPressのインストール

まずは「Japanese Font for WorldPress」のプラグインをインストールします。

ワードプレスのダッシュボードの「プラグイン」→上方にある「新規追加」→「Japanese Font for WorldPress」を検索→「インストール」の手順です。

インストールしたら「インストール済プラグイン」のJapanese Font for WorldPressの「有効化」をクリックします。

ここまでできればもうOKです。頑張りました!

Japanese Font for WorldPressの使い方

投稿記事画面のブロックツールで文字の種類を見たら、「ふい字」などが増えているはずです(文字選択画面はテーマによって違うと思いますが)。

あとは、使いたいフォントを選んで入力するだけです!

Google Fonts(グーグルフォンツ)はプラグインなしでできる

Google Fontsは、1,000文字以上が利用できるとされている便利なツールです。

手順としては、Google Fontsのページに移動し、欲しい文字をクリックしてダウンロードし、CSSをコピペするだけ。少し手間がかかるような気もしますが、超初心者の私でもできるレベルなので安心してください。

初心者向け!Google Fontsの使い方1.文字をPCにダウンロードする

まずはGoogle Fontsのページに移動し、「Language」を「Japanese」にして日本語表記にしましょう。

そして、フォントを検索したり、下の文字の中からどれが欲しいか選んだら、上部にある「Download family」をクリックしてPCに文字をダウンロードします。

Google Fontsの使い方2.ワードプレスのstyle CSSに追加する

選んだフォントの右側にある「Select this style」をクリックします。

もっと言うと文字幅などを細かく調整できるのですが、ここでは省きます(すみません…)。

次に、右上のWindowsマークみたいなものをクリックします。

すると、右側に「Use on the web」と言う欄があるので、「<link>」ではなく「@import」に変えます(linkからもできますが、私はimportで行いました)。

それから「@import」の下にある<style>~</style>の中身「@import」~「swap’);」までをコピーします。

次に、ワードプレスのダッシュボードの「外観」→「カスタマイズ」→「追加CSS」を開き、一番上にペーストして、上部の「公開」をクリックします。

これで第一段階クリアです!

Google Fontsの使い方3.CSSを追加する

次に、Google Fontsの「CSS rules to specify families」の部分をコピーします。字体によってはfont-familyが縦に3つくらい並んでいる場合がありますが、今は一番上だけをコピーしてみます。

全ての記事のフォントを一斉に変える場合は、先ほどの「追加CSS」の一番下に、以下を参考にコピペして「公開」します。

1.文章を変える場合

p{

font-family: ‘Dela Gothic One’, cursive;

}

2.H2の見出しだけを変える場合

h2{

font-family: ‘Dela Gothic One’, cursive;

}

字体の種類は、先ほどコピーしたfont-familyの「’  ‘」内にある部分を使います。私の場合は「’Dela Gothic One’, cursive;」になっています。

全ての記事だけでなく、特定の記事だけを変える場合は、記事内の追加CSSに、以下をコピペしてください。

1.文章を変える場合

p{font-family: ‘Dela Gothic One’, cursive;}

2.H2の見出しだけを変える場合

h2{font-family: ‘Dela Gothic One’, cursive;}

私の場合はテーマがlightningなので、記事内に「カスタムCSS」という欄があり、そこに追記ができます。

Google Fontsの使い方4.フォントを変える部分のHTMLを編集する

先ほど追加したCSSは、「p(文字)やH2(H2の見出し)の部分の字体を変える」という命令にあたるため、文章内のどこがPでどこがH2にあたるのかを明確にする必要があります。

そこで、字体を変更したい部分をマークし、HTMLで編集します。テーマによって編集マークが違うのですが、例えばCocoonの場合は、</>マークをクリックすることでHTMLソースに切り替わります。マウスの右クリック→検証から編集できる人も。

私の場合はテーマがlightningなので、こんな風にHTML編集ができます。

そして、字体を変える文章の最初と最後に<p></p>を入力します。同じように、変えたい見出し(H2)の最初と最後に<h2></h2>を入力します。テーマがCocoonの場合は、編集しなくてもすでにpタグやh2タグなどが入っている気がします。

そしてプレビューすると…。

無事にできました!

ワードプレス超初心者でもフォントは変更できる

今回は機械オンチの昭和オンナでもフォントが変更できた話を紹介しました。少しでもお役に立てたら嬉しい限りです。