この記事は公開から10年、最終更新日からも10年経過しています。内容が古くなっている可能性があります。
Webフォントを使ってみます(1)〜まずはGoogle Fontsから
目次
概要
Webデザインの際の一つの関門、環境によってフォントがなかなか統一出来ないということ。
そこで、登場するのが、Webフォント。
本当は日本語フォントを導入したいのだけど、どうも、うまくいかないので、まずは簡単なGoogle Fontsを使って勉強してみました。これならフォントをサイトにアップロードする必要もないですしね。
Google Fonts
前提条件
本投稿では、WordPressに適用する前提で記載しておりますが、HTML/CSSコーディングの場合も同様かと思います。
使用方法1；フォントを選びます。
Google Fontsにアクセスして、使用したいフォントを選びます。
※任意のテキスト、大きさ、種類などで表示を確認する事も出来ます。
ここでは、「Cherry Cream Soda」を選ぶことにします。
使用方法2；サイトに埋め込むためのコードを取得します。
選んだフォントの左下の矢印を押します。
以下の様な表示になります(下記は1〜4のスクリーンショット)。
上記のうち「3. Add this code to your website:」と「4. Integrate the fonts into your CSS:」が実際のサイトに適用させるためのコードになります。
使用方法3；スタイルシートを読み込みます。
WordPressの場合、テーマファイルの「header.php」に記述することになると思います。
<link href=’http://fonts.googleapis.com/css?family=Cherry+Cream+Soda’ rel=’stylesheet’ type=’text/css’>
使用方法4；適用させたい箇所のスタイルシートを記述します。
WordPressの場合、テーマファイルの「style.css」に記述する場合が多いと思います。
ここでは、例として、フォントサイズ、色を変えた３種類のクラスを定義しておきます。
.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フォントを導入しようと思います。
