Webフォントを使ってみます(1)まずはGoogle Fontsから

  • スポンサーリンク

  • スポンサーリンク

Webフォントを使ってみます(1)〜まずはGoogle Fontsから

概要

Webデザインの際の一つの関門、環境によってフォントがなかなか統一出来ないということ。
そこで、登場するのが、Webフォント。
本当は日本語フォントを導入したいのだけど、どうも、うまくいかないので、まずは簡単なGoogle Fontsを使って勉強してみました。これならフォントをサイトにアップロードする必要もないですしね。

Google Fonts

Google Fonts

前提条件

本投稿では、WordPressに適用する前提で記載しておりますが、HTML/CSSコーディングの場合も同様かと思います。

使用方法1;フォントを選びます。

Google Fontsにアクセスして、使用したいフォントを選びます。
※任意のテキスト、大きさ、種類などで表示を確認する事も出来ます。
ここでは、「Cherry Cream Soda」を選ぶことにします。
Google Font

使用方法2;サイトに埋め込むためのコードを取得します。

選んだフォントの左下の矢印を押します。
スクリーンショット 2014-10-22 00.15.34

以下の様な表示になります(下記は1〜4のスクリーンショット)。
スクリーンショット 2014-10-22 00.17.46
スクリーンショット 2014-10-22 00.18.12
スクリーンショット 2014-10-22 00.18.17
スクリーンショット 2014-10-22 00.18.25
上記のうち「3. Add this code to your website:」と「4. Integrate the fonts into your CSS:」が実際のサイトに適用させるためのコードになります。

使用方法3;スタイルシートを読み込みます。

WordPressの場合、テーマファイルの「header.php」に記述することになると思います。
スクリーンショット 2014-10-22 00.29.31

<link href=’http://fonts.googleapis.com/css?family=Cherry+Cream+Soda’ rel=’stylesheet’ type=’text/css’>

使用方法4;適用させたい箇所のスタイルシートを記述します。

WordPressの場合、テーマファイルの「style.css」に記述する場合が多いと思います。
ここでは、例として、フォントサイズ、色を変えた3種類のクラスを定義しておきます。

.gfont1 {
font-family: ‘Cherry Cream Soda’, cursive;
color:black;
font-size:150%;
}
.gfont2 {
font-family: ‘Cherry Cream Soda’, cursive;
color:red;
font-size:200%;
}
.gfont3 {
font-family: ‘Cherry Cream Soda’, cursive;
color:blue;
font-size:250%;
}

適用結果

上から順に、「gfont1」「gfont2」「gfont3」のクラスを適用しております。

capture by nakamura yuji

capture by nakamura yuji

capture by nakamura yuji

最後に

とりあえず、Google Fontsは使用できるようになりました。但し、Google Fontsは英数字のみです。
次は日本語のWebフォントを導入しようと思います。


  • スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA