ダサい英字フォントをGoogle Web Fontsでオシャレに変更する方法

google-web-fonts-thumbnail

以前、「Noto Sans Japanese」というWebフォントを紹介しました。

noto-sans-japanese-thumbnail
Webフォント「Noto Sans Japanese」の導入方法を紹介します。 「Noto Sans Japanese」ってどんなフォ

とても綺麗なフォントなのですが、これは日本語専用のフォントのため英字には反映されません。

google-web-fonts-01

山川
これはダサいですよね……せっかくの英字タイトルが台無し

ということで、今回は英字専用のWebフォント「Google Web Fonts」を使って、タイトルをオシャレにカスタマイズしてみます。

カスタマイズ完成イメージ

Google Web Fontsを反映させると、このようになります。

google-web-fonts-05

これが画像じゃなくてテキスト文字っていうのがすごいですよね!

ちなみに2017年5月23日現在、フォントは818種類もあります。
フォントだけでブログの雰囲気もガラリと変わるので、イメージ付けにWebフォントはぜひ取り入れたいところです。

カスタマイズの手順

カスタマイズは以下の手順でおこないます。

  • 好みのフォントを探す
  • フォントを保存する
  • CSS読み込みタグとCSSをサイトに追加する

好みのフォントを探す

こちらのリンクにたくさんのフォントが掲載されています。
まずは好きなフォントを探しましょう。

参考Google Fonts

フォントを保存する

私はLobsterというフォントにしてみることにしました。

google-web-fonts-02

フォントの横のQuick-useという右矢印をクリックします。

google-web-fonts-03

CSS読み込みタグとCSSをサイトに追加する

下の方にスクロールすると、CSS読み込みタグとCSSが表示されます。

google-web-fonts-04

Lobsterだとこんな感じです。
まずは、CSS読み込みタグを<head></head>内に追加します。

<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Lobster' type='text/css'>

次にCSSを追加します。例として、STINGER8の場合のCSSは以下の通りです。
違うテーマをお使いの方は、反映させたいセレクタで設定してください。

//タイトルロゴ
.sitename a {
    font-family: 'Lobster', cursive;
}

これでタイトルが「Google Web Fonts」に変更できます。

グローバルメニューやサイドバーに使っても面白いかもしれません。

//グローバルメニュー
header .smanone ul.menu li a {
    font-family: 'Lobster', cursive;
}
//サイドバー見出し
.menu_underh2 {
    font-family: 'Lobster', cursive;
}

Google Web Fontsはたくさんあるので、ブログの雰囲気に合ったオシャレなフォントを探してみてください。

google-web-fonts-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

日本語が含まれない投稿は無視されます。(スパム対策)