【かんたん2ステップ】Google FontsのWebフォントでサイトを彩ろう!【2017年最新版】

web-font

ブログやWebページのフォントは、ページの印象を大きく左右します。

当ブログでは、Google Fontsの“Quicksand”を使用しています。(日本語はNoto Sans)

今回は、WordPressでWebフォントを適用する方法を紹介します!

導入は簡単!2ステップ

Webフォントの導入についてはこちらのページを参考にさせていただきました。

Webフォントでブログを華やかに! Google Fontsの「Quicksand」がいい感じ

ちなみに前ブログの「すこしだけでも、いいものを」でも、Quicksandを使用しています。

すこしだけでも、いいものをフォントイメージ

Quicksandを適用すると、こんな感じ^^

ステップ1 Google fontsにアクセスしてコードを取得する

まずはフォントをインポートするコードを取得するためにGoogle Fontsへアクセスします。

https://fonts.google.com/

google fonts検索画面

右上の検索ウィンドウに使用したいフォント名を入力。ここではQuicksand

 

Quicksandimport

+をクリックする

 

quicksandインポート2

「1 Family Selected」をクリックする

 

Quicksandインポート3

「@import」をクリックする

「@import」をクリックして、CSSへ記述するための「@import url〜」をコピーします。こちらのコピーでも良いです。↓↓

@import url('https://fonts.googleapis.com/css?family=Quicksand');

「CUSTOMIZE」のタブをクリックすると、インポートするフォントのウェイトなどを変更することができます。私はデフォルトの’400’でインポートしています。

ステップ2 CSSにimport urlとfont-familyを記述

WebフォントはWeb上のサーバーからフォントを読み込むため、自分のサーバーにフォントファイルを置く必要はありません。

WordPressテーマのstyle.cssにインポートするフォントのurlの記述と、フォントファミリーの指定を行います。子テーマを作成されている方は、子テーマへ記述しましょう。

import urlの記述

CSSのトップに、STEP1でコピーしたimport urlをペーストします。

@import url('https://fonts.googleapis.com/css?family=Quicksand');

CSSにインポートurlを記述

すでに「@import」がある場合は、その下へペーストしましょう。写真では、親テーマや他のWebフォントを読み込んでいるため、このような記述になっています。

font-familyを指定

インポートするURLの記述ができたら、CSSの適用したい部分へfont-familyの記述をします。

font-family記述

当ブログでは、「body」部分と「hタグ」部分でフォントファミリーを定義しています。

後述しますが、うまくフォントが適用できなかったために「!important;」が付いていますが、本来は必要ありません。

また、フォントファミリーの値も、Google fontsからコピペできます。

GoogleFontsのフォントファミリー

こちらのコピペだけでもよいです↓↓

font-family: 'Quicksand', sans-serif;

2017年1月5日現在、当ブログで使用しているフォントファミリーは以下です。

font-family: 'Quicksand', 'Noto Sans', メイリオ, sans-serif;

これからも変わるかもしれませんが、いろいろ試してみて良かった組み合わせで指定しています。

Quicksandは英数のみのフォントなので、日本語との組み合わせが悩むところです。Google fontsでは、現在Noto Sansのみが日本語対応です。

Quicksand適用イメージ

Quicksandを適用した様子

紹介したフォントファミリーを適用したイメージです^^洒落た感じになりますね。

特に問題がなければ、以上の2ステップでGoogle FontsのWebフォントを利用することができます!

しかし、私の環境ではこの手順でフォントを適用することができませんでした…

Webフォントが反映されない?

手順や記述は間違いないはずです。しかし、私のブログでは頑なに極太のゴシック体が適用されたままでした。

Webフォントが当たらない

なぜ?

WordPressテーマかサーバーに依存するものか…

最終的には適用できたのですが、いろいろ試してみたことを書いておきたいと思います。

header.phpにもインポートのコードを記述

header.phpの<head></head>の間に以下のコードを追加してみましたがダメでした。

<link href=”https://fonts.googleapis.com/css?family=Quicksand” rel=”stylesheet”>

サーバーのWAFオフ

ファーストサーバのzenlogicを使用しているので、WAF(Webアプリケーションファイアウォール)を一旦OFFにしてみたのですがダメでした。

機能別マニュアルWAF(WEBアプリケーションファイアウオール)

CSSのfont-familyに「!important;」記述

font-family: 'Quicksand', sans-serif!important;

としてみましたがダメでした。なかなか頑固です。

カスタマイザーの影響?

当ブログはWordPressテーマFirstを使用しています。

「外観 > カスタマイズ」とクリックすると、カスタマイザーの画面に切り替わり、CSSの記述などなく視覚的にデザインを変更できます。もちろんフォントの変更も可能です。

カスタマイザーのフォント変更画面

もしかして、CSSで指定しても結局カスタマイザーのフォントが優先されるのでは?との考えが浮かびました。

そもそもカスタマイザーは使用せず、CSSで全て指定したいから、「customizer.phpを一旦削除してみよう!」という無謀なアイデアを実践です。

customizer.phpを削除すると?

サイトへアクセスできなくなりました

そりゃそうです。薄々は分かっていたので、ローカルにバックアップしておいたcustomizer.phpをFTPでアップロードすると…

なんと、Quicksandが適用されていました\(^o^)/ パチパチ

絶対に正しい方法ではないし、理屈も不明ですが、カスタマイザーが影響していることは間違いなさそうです。

今でも、カスタマイザーを触ると、hタグの見出し部分のフォントがデフォルトのゴシックになっている時があります。なぜだろう…

ブラウザのキャッシュにもよる

フォントの適用を試行錯誤していた時、Chromeで見るとフォントの変更が反映されていないけど、Safariだと反映されているといったことがよくありました。

表示を高速化するために、ブラウザにWebフォントをキャッシュしているのだと思いますが、Chromeの方が頑なにキャッシュを保持している印象です。

キャッシュクリアすればすぐに変更を確認できます。

フォントに限らずCSSの変更などが適用されない時は、別ブラウザでもプレビューしてみましょう。

まとめ

フォントはWebサイトの印象の大部分を占めます。私も全然知識はないのですが、いろいろ適用してみてピンときたフォントを採用しています。

Webフォントは、サイトを閲覧するパソコンやブラウザに依存しないため、好きなフォントを選択してしっかり主張することができます。

フォントの種類だけではなく、ウエイトやサイズにもこだわることで、よりこなれた感を演出できます。私もまだまだですが、いろいろなフォントを試してみたいと思います!

それでは、よいブログライフをお送りください^^

Sponsored Link



web-font

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA