GoogleFontsのウェブフォントをブログで使う方法

GoogleFontsでは、無料で様々なウェブフォントを利用することができます。
今回は、GoogleFontsをブログで使う方法を説明します。

スポンサーリンク

GoogleFontsとは

GoogleFontsは、Googleが提供している、無料で利用できるウェブフォントサービスです。

ウェブフォントというのは、サーバーに置いてあるフォントのことです。
自分のブログのCSSに記述をするだけで、簡単にフォントを利用することができます。

また、サーバーにあるフォントを表示するので、どのデバイス(パソコン・スマートフォンなど)、OS(Windows・Mac・Android・iOSなど)でも同じ表示になります。

GoogleFontsの使い方

GoogleFontsの使い方を説明します。

フォントを選ぶ

Google Fontsにアクセスします。

利用したいフォントを見つけ、フォント名の右側にある+をクリックすると、画面下部に「1Family Selected」と表示されます。

複数のフォントを選択することも可能です。

画面右側の部分で、検索や絞込みをすることができます。

フォントのウェイト(太さ)を選ぶ

フォントの選択が終わったら、「○Family Selected(○は選んだフォント数)」をクリックし、選んだフォントの中で利用するウェイト(太さ)を決めます。

「CUSTOMIZE」をクリックして下さい。

「CUSTOMIZE」タブが表示されます。
使用するウェイト(太さ)にチェックマークを入れて下さい。

CSS(スタイルシート)に記述をする

今回は、CSS(スタイルシート)の記述のみで利用する方法を説明します。

僕は、SimplicityというWordpressテーマを使っています。
WordPress初心者におすすめのテーマはSimplicity

再び、「EMBED」タブに戻り、「@IMPORT」をクリックします。

子テーマのスタイルシートを開き、1行目の@charset "UTF-8";のすぐ下に①の部分を、フォントを指定したい要素に②の部分を記述します。

【サンプル】

/************************************
** スタイルシート
************************************/
@charset "UTF-8";
/*GoogleFonts*/
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');
.
.
.
.
/*ブログタイトルフォント*/
#site-title a{
 'Roboto', sans-serif;
}

この手順で、GoogleFontsをブログの任意の場所で使うことができます。

さいごに

GoogleFontsを使えば、無料で簡単に色々なフォントを試すことができます。
英語のフォントであれば、あまり重くもないので、ページの表示速度にもそれほど影響はありません。

ただ、日本語のフォントはほとんどないので、使う場面は限られるかもしれません。

Comments

タイトルとURLをコピーしました