wordpress

WordPressで簡単に「Google Fonts」を使う方法

こんにちは、SHIBAKEN – @dec_shibaken – です

ブログを開設していく中で、デザインやフォントの統一性が気になる方は沢山いらっしゃるのではないでしょうか?

macやwindowsにはデフォルトでフォントが用意されていますが、いまいちだな。。と思われている方が大半なんだと思います。

そんなフォントのお困りの方に今回は、「Google Fonts」というgoogleが提供している、無料のWebフォントのご紹介させて頂き、設定方法までご説明させて頂きたいと思います!

そもそもGoogle Fontsって?

Google Fontsは商用利用でも、無料で使えるWebフォントサービスです。

Google Fontsページから好きなフォント選ぶ

それでは使い方を見ていきましょう!

まず、Google Fontsのページにアクセスしましょう。

そして、使いたいフォントを選びます。
ちなみに、日本語のフォントを利用したい方は、「Language」のプルダウンから「Japanese」を選択してください。

①をクリックすると、選択したフォント②が出現します。

出現した②をクリックしてみてください。クリックすると、以下のように選択したフォントの詳細が表示されます。
表示されたら、一旦画面をそのままにして次の工程に移りましょう。

Google FontsをWordPressで設定する。

今度は別画面で、ご自身のWordPressより、「外観」→「テーマエディター」を開き、
エディターからheader.phpを選択し表示させてください。
以下のような画面になります。

ここからは、実際にフォントを読み込ませたいと思います。
一旦、「Google Fonts」の画面に戻り以下の箇所をコピーしてください。

コピーが完了したら、<head></head>タグ内にペーストしましょう。
ご自身が選んだ、フォントの読み込み設定を行いました。

設定が完了したら、ファイルを更新してみましょう。更新が完了したら、フォントの指定を行っているcss(スタイルシート)ファイルの編集を行います。

フォントを適用させるには、css(スタイルシート)のfont-familyというプロパティの編集が必要になります。なので、エディターの中のstyle.cssを選択してcssをエディターに表示させてください。

font-familyのプロパティ名を検索してください。検索するといくつか必ずヒットします。

ヒットしたら、コピーした内容で上書きしてください。

上書きが完了したら、ファイルを更新して実際にプレビュー画面で実際にフォントが変更されているかを確認してみてください。
これで完了です。

いかがでしたでしょうか?

私自身もブログの改良が毎日の日課となっており、フォントの見た目は課題となっておりました!
実は意外に簡単なんですね!フォントが変更されるとページの雰囲気も変わり、ページへの愛着も増しますよね!

是非参考にしていただければ幸いです!

ありがとうございました!

TwitterのタイムラインをWordPressに埋め込む簡単な方法こんにちは、SHIBAKEN - @dec_shibaken - です 今回はTwitterのタイムラインの埋め込みをご紹介いたし...
フリーランス / ブロガー
SHIBAKEN
埼玉生まれ東京育ちの独身30代男。 都内の出版社でWebデザイナーとして就職。その後転職し、制作会社でフロントエンドエンジニアとして6年間従事。 現在は会社を退職し、フラリフラリと風に吹かれながらフリーランスとして現在に至る。

プロフィールの詳細はこちら
\ Follow me /