ワードプレスWEBフォントを使って文字を美しくする方法を教えるよ!

人のサイトを見ていて、この文字美しくない??って思った事って一度はあると思います。

そんなサイトは、おそらくWEBフォントを使っています。

今回は無料のWEBフォントを簡単に導入して、自分のブログを美しく魅せる方法を書いていきます。

このブログにも導入しています。

Webフォントとは

何気なく見ている文字ですが、使っている機種によって内蔵されているフォントって違うんです。

適合するフォントが無い場合ってデバイスの適当なフォントが使用されるので、見た目が若干変わってたりするんですよ。

多分、PCとスマホでイメージ違うなって思ったこともあると思います。

そんな時に役立つのがWebフォントです。

Webフォントはインターネット上のサーバーに置かれている文字データを使って、様々なデバイスでも綺麗なフォントを表示する為の仕組みと思って下さい。

今までは結構、設定が面倒だったりしたのですが、今はプラグイン一発で導入できるので文字に対して「おやっ?」と思った人は試してみて下さい。

それでは行ってみましょう!

Webフォントプラグイン Google Fonts Typography

今回は、 Google Fonts Typographyと言うワードプレスのプラグインを使ってやってきます!

Google Fonts Typographyを使ったWebフォントの導入手順
1.Google Fonts Typographyプラグインをインストール
2.Google Fonts Typographyプラグインを設定

Google Fonts Typographyプラグインをインストール

ワードプレスgoogleWEBフォントプラグイン

プラグインインストールの画面で、「 Google Fonts Typography」と入力してプラグインを検索して Google Fonts Typographyをインストールして有効化します

プラグインの設定をしていきます
ワードプレスWEBフォントプラグイン設定

インストールが終わったら、プラグインのSettingsをクリックし

ワードプレスWEBフォントプラグイン設定

設定画面でGoogle Fontsをクリック

ワードプレスWEBフォントプラグイン設定

Basic Settingsをクリック

ワードプレスWEBフォントプラグイン設定

赤枠の3つを好きなFontに変更します。

上から、通常の記事フォント、ヘッダー見出しのフォント、ボタンやコメントフォームに使うフォントが選べます

特にこだわりがなければ全部一緒で良いでしょう!

ちなみに、このブログはKosugi Maruを使っています(変わってたら御免なさい)

GoogleFontの一覧はこちら

以上でWebFontの導入が完了です!

これで、スマホで見てもPCで見ても同じような文字の感覚になると思います。

もしならなかったら下記の設定をしてみて下さい

 

設定画面で Debugging を開く
ワードプレスWEBフォントプラグイン設定
Force Styles? にチェックを入れる

最後に

如何でしたでしょうか

結構、簡単に導入出来たと思います。

文字で記事の雰囲気って大分かわるし綺麗なフォントだとモチベーションも上がりますので、おやっと感じた人は是非やってみて下さい!