これが全部無料なの?Google Web Fontsの使い方

これが全部無料なの?Google Web Fontsの使い方

前々よりずっと気になっていたGoogle Web Fonts。先日ちょいと時間があいたので思い切ってブログに導入してみました。その便利さたるや、言葉では言い表せないほど。完全に私はこやつのトリコになりました。

というわけで今回は、個人的にひじょーーにオススメ!Google Web Fontsの使い方をご紹介:)

SPONSORED LINK

Google Web Fontsとは

通常ブラウザに表示できるフォントは、ユーザーのパソコンにインストールされているフォントしか表示することが出来ません。しかし「Webフォント」を使えば、ユーザーのパソコンにないフォントも表示できるようになります。

Googleが提供するWebフォントサービス「Google Web Fonts(最近はGoogle Fontsと言うらしい)」はアカウント登録の必要がなく、無償で公開されているのでこれを使わない手はありません。

このブログでも Google Fonts を使用

このブログでも Google Fonts を使用させていただいております。
ひじょーーーに感謝です。

Google Web Fontsの使い方

フォントを選ぶ

まずは以下のサイトにアクセス。

Google Fonts(公式サイト)

いっぱいある中からお好みの女の子フォントを選びましょう!

「Quick-use」をクリック

好みの女の子フォントが見つかったら「Quick-use」をクリック。

文字の太さを選びます

1. Choose the styles you want(文字の太さ)

文字の太さを選びます。

欲望むき出しにいっぱい選びすぎると、読み込むのに時間がかかりブログの表示が遅くなります。メーターを見ながら必要最低限のものだけ選びましょう。

文字の種類を選びます

2. Choose the character sets you want(文字の種類)

文字の種類を選びます。

「Latin(ラテン語)」が選択されていればOK。

コードをメモ

3. Add this code to your website(コード)

「Standard」に表示されているコードをコピーしてメモ帳などにいったん張り付けます。

CSSもメモ

4. Integrate the fonts into your CSS(CSSプロパティ)

このCSSもコピーしてメモ帳などに張り付けておきます。

BloggerにCSSの読み込みを追加する

「3. Add this code to your website」でコピーしたコードをBloggerに貼り付けます。

「テンプレート」-「HTML の編集」をクリック

Blogger管理画面より「テンプレート」-「HTML の編集」をクリック。

ここに張り付ける!

ソースから</head>を探し、その上に貼り付けます。

CSS(font-family)を設定する

次にCSSを設定します。

ここに定義して張り付ける!

ソースの中から]]></b:skin>を探します。

その上に「#(id)」や「.(クラス)」を定義し、「4. Integrate the fonts into your CSS」でコピーしたCSSを貼り付けましょう。

「テンプレートを保存」をクリック

最後に「テンプレートを保存」をクリックして完了。

まとめ

というわけで、ひじょーにオススメのGoogle Web Fontsの使い方のご紹介でした。

みなさんもお好みの女の子フォントを見つけて、是非お試しくだされ:)

SPONSORED LINK

この記事がお役にたちましたらシェアをお願いします:)