綺麗なフォント、おしゃれなフォント、面白いフォントを使いたい！でも OS に備え付けられているフォントにはいいものがない。そういった方におすすめしたいのが Webフォントです。Webフォントは日々、世界中で新しいものがデザインされており、有名なフォントサイトのものを軽く数えるだけでも、数百、数千に達します。
この記事では、外国製の英数字 Webフォントから日本製の日本語 Webフォントまで、WordPress での使い方を詳しく解説していきますので、ぜひ参考にしてください。
実はこのブログでも Webフォントを使わせてもらっています。サイドバーに今週の人気記事ランキングという欄がありますが、そこの No.1 と書かれているランキングの数字部分を Webフォントで表示しています。カッコイイフォントなので、ブログのイメージアップに大きく貢献してくれているのではないでしょうか。
今週の人気記事ランキング
こんな感じでちょっとしたポイントに使う方法や、WordPress の記事に使われているフォントを Webフォントに置き換える方法なども解説していきます。
WordPress で Webフォントを使うために
WordPress で Webフォントを使うには、HTML タグを挿入しなければなりません。そのために Simple Custom CSS and JS というプラグインを利用します。インストールしたことがない方は、以下のページを参考にインストールしてみてください。
Webフォントの使い方
1. Google Fonts を使ってみよう！
Webフォントで最も有名な Google Fonts を試しに利用してみましょう。800 を超えるフォントがあり、さまざまなデザインのものが揃っています。
上記サイトにアクセスしてみてください。画像のページが表示されると思います。
2. 使用するフォントを選択する
今回は例として Bangers というフォントを使用してみます。なんでもいいので、気に入ったフォントを選択して右上の + ボタンを押してみてください。
3. <link> タグをコピーする
+ ボタンを押すと、ページの下の方に 1 Family Selected と書かれた黒い帯が表示されますので、そこを押してみましょう。そして赤線部分のコードを選択してコピーしてください。
4. <link> タグを貼り付ける
WordPress のダッシュボード > Custom CSS & JS > Add Custom HTML を選択して、画像のページに移動してください。タイトルに Web Fonts と入力し、下のフォームの <!– –> で囲まれた赤文字の英文をすべて削除してから、さきほどの <link> タグを貼り付けます。そして右側にある 公開 ボタンを押しましょう。
これで選択した Webフォントが WordPress 内に読み込まれます。
5. 記事内で Webフォントを利用してみる
新しく記事を作成する、既存の記事を編集する、どちらでもいいので記事投稿ページに移動してください。そしてそこでテキストエディタを開きましょう。開いたら以下のコードを入力してください。
<p style="">Yeahhhh!!</p>
次に Google Fonts のページに戻って、画像赤線のタグをコピーしてから style=”” の中に貼り付けてください。
<p style="font-family: 'Bangers', cursive;">Yeahhhh!!</p>
上記のようなコードになったら記事を公開して Webフォントが適用されているかチェックしてみましょう。プレビューでも構いません。
6. Webフォントが適用されました
記事をチェックすると Webフォントが適用されているのがわかると思います。フォント：Bangers は漫画の擬音文字みたいでなかなかカッコイイですね！
※ 画像ではわかりやすくするために、フォントのサイズを大きくしています。
こんな感じで、style=”” の中に、font-family:~; をコピーすると、その部分だけ Webフォントが適用されて表示されます。
Google Fonts の場合は英数字だけになってしまいますが、強調したい部分に Webフォントを適用してみると、記事のアクセントになって面白いと思いますよ。
WordPress で日本語 Webフォントを使う方法
Google Fonts では日本語の Webフォントも試験的に提供してくれています。日本語はアルファベットと違い、ひらがな、カタカナ、漢字に対応しなければならないため、まだまだフォント数は少ないのですが、面白いフォントが揃っています。
Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access
上記サイトにアクセスしてみてください。個性のあるフォントが用意されていると思いませんか？
1. <link> タグをコピーする
今回は例として、ニクキュウという変わったフォントを WordPress で使ってみます。HTML と書かれた部分にある <link> タグをコピーしましょう。画像赤線の部分です。
<link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet" />
このタグをさきほど追加した HTMLタグの Web Fonts に貼り付けてみましょう。
2. Web Fonts を編集する
ダッシュボード > Custom CSS & JS > All Custom Code を押して、このページに移動したら、Web Fonts 欄にある 編集 ボタンを押しましょう。
3. <link> タグを貼り付ける
通常の Google Fonts のコードの下に、日本語 Webフォントの <link> タグを貼り付けてください。そして右側にある 更新 ボタンを押しましょう。
これで 日本語 Webフォントが WordPress に読み込まれます。
4. スタイルシートを追加して Webフォントを適用する
ダッシュボード > Custom CSS & JS > Add Custom CSS から画像のページに移動してください。このページでスタイルシートを追加します。
タイトルに Font と入力し、下のフォームで /* */ に囲われた赤文字の英文をすべて削除してから、以下のコードを貼り付けてください。
body {
font-family: , sans-serif !important;
}
そして Google Fonts のページに戻り、画像赤線の部分に書かれている、””に囲まれたフォント名を選択してコピーしてください。
今回の例の場合は “Nikukyu” になります。
次はそのフォント名をこのように貼り付けます。フォント名の後には , （半角のコンマ）が必要です。
body {
font-family: "Nikukyu", sans-serif !important;
}
貼り付けられたらフォーム右側にある 公開 ボタンを押してください。これで Webフォントが WordPress に適用されます。
5. 記事で確認してみましょう！
完成！ニクキュウはカタカナだけのフォントなので漢字と混じり合って、なにが書いてあるのかパッと見ではわからない暗号のような文章になりました。
ここまで個性的にする必要はないと思いますが、Webフォントを使えば、他とはちょっと違った雰囲気のブログにすることも可能です。日本語の Google Fonts にはいくつかフォントが用意されていますので、いろいろ試してみてください。
Webフォントを使う際の注意点
Webフォントを利用する場合、大量にフォントを読み込むのはやめましょう。1～3つくらいが限度だと思います。それ以上読み込むと、ブログ全体が重たくなってしまうので、必要なフォントを絞って利用するように心がけてください。
フォントの変更についてはこちらの記事でも解説しています。フォント変更時に利用するスタイルシートについてもっと詳しく知りたい方は、以下のページを参考にしてください。
