こんなに簡単 Google Fonts!

無料WEBフォントのGoogle fontsが、Raindropsテーマなら簡単に使うことが出来ます。

Google Fonts サイトで、好きなフォントを選びます。

(フォント名にスペースが3個以上あるフォントは使えませんが、全体の90%以上は使うことが出来ます)

Open Sans というフォントを使って使用方法を説明します。

投稿本文をテキストモードで以下のように記述します。

<p class="google-font-open-sans">Goodby 2014</p>

Goodby 2014

Open Sans では、300から800までのフォントウェイトがありますが、フォントウェイトを指定する場合は、以下のようにします。

<p class="google-font-open-sans800">Goodby 2014&</p>
Goodby 2014

これだけで、太字のOpen Sansを表示します。

クラス名は、 google-font- + (小文字にしたフォント名で、スペースを - に変更します)

フォントのサイズを変更する場合には、Raindropsの組み込みクラスを使います。

<p class="google-font-open-sans800 f16">Goodby 2014</p>

Goodby 2014

f10-f40 まで使えます ( サイズはpx 相当 )

フォントエフェクトクラスも使えます。

Google Fonts Getting Startedで紹介されているフォントエフェクトも使えます。

<div class="font-effect-shadow-multiple f26 google-font-rancho">This is a font effect!</div>
This is a font effect!

お楽しみください


コメントは受け付けていません。