Webの記録

Webフォント「Google Web Fonts」を使ってみた

投稿日:

この記事は約 3 分で読めます。

webfonts_ttl_mini
だんだんと古いブラウザに対応しなくてよくなってくると、以前は画像だけで対応していたものがcss3などを利用できるようになってきます。
Webフォントもcss3の技術。簡単に好きなフォントを使えるのが嬉しいです!
今回やっと(?!)「Google Web Fonts」を使う機会があったので、さくっとメモとして残します。


「Google Web Fonts」の特徴

  • 無料で商用利用可能
  • 簡単にコピペするだけで実装可能
  • アカウントの登録の必要なし
  • テキストなので、文字の拡大縮小をしても汚くならない
  • テキストなので修正が楽!フォント変更も簡単!
  • CSS3の技術。古いブラウザでは対応できない
  • 和文フォントは無い


「Google Web Fonts」の使い方

Google Web Fontsにアクセスします。


画面の一番左にある「Filters」で文字の種類を選択します。(Handwritingは手書き風文字、Monospaceは等幅フォント)
その横にある「Preview Text」は、「Enter your own text」で任意の文字を入力すると、見たいテキストのデザインを比較できます。
気に入ったフォントが見つかったら、フォントの欄の右側にあるボタンのうち、→(右矢印)マークをクリックします。
googlefonts_1_mini


フォントによっては、太さや斜体などの種類がたくさんあるものがあります。その中で必要なものをチェックします。
googlefonts_2_mini


すると、貼りつけるコードが出てきます。
【例】以下のコードはサンプルです

//headの中に貼りつけます
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
//cssの中に貼りつけます
h1 {
font-family: 'Niconne', cursive;
}

googlefonts_3_mini


ここまでで、ブラウザで見てみるとフォントが任意の部分のテキストが「Google Web Fonts」で表示されます。
さらにエフェクトを加えたい場合は、以下のサイトを参考にされると良いと思います。
Getting Started:https://developers.google.com/fonts/docs/getting_started


和文フォントも試したいところですが、まだまだ手が出せていません。。。
いつか、機会があれば・・・メモします。

-Webの記録
-, ,

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

Facebookの個人プロフィールに勤務先のFacebookページをリンクさせる方法

この記事は約 1 分で読めます。 Facebookの個人プロフィールに、勤務先を入れた時に勤務先のFacebookページとうまくリンクされない事があります。 案外、ココがクリックされているようで・・・ …

no image

Photoshopのテキストレイヤーからテキストを抽出する方法

この記事は約 2 分で読めます。 Photoshopで作られたカンプからコーディングをする時に、テキストレイヤーにある文字をいちいち入力するのは面倒だと思いつつ、今まで全て手打ちしてました。。。時間ロ …

no image

Facebookページで「30いいね!」を獲得したら出てくる「インサイト」画面。

この記事は約 1 分で読めます。 ゆるゆると更新していたFacebookページ。 ようやく「いいね!」の数が30を超えました。 すると、今まで見る事が出来なかった「インサイト」という項目が表示されるよ …

WordPressのウィジェットに表示した「タグクラウド」をカスタマイズしてみる

この記事は約 2 分で読めます。 WordPressのタグクラウドを表示させる方法として、「ウィジェットに表示させる方法」と、「オリジナルのsidebar.phpにテンプレートタグを記述させる方法」と …

no image

無料で簡単!アイコンフォント「Font Awesome」を使ってみた

この記事は約 1 分で読めます。 先日SNSアイコンをつけた時に、アイコンフォント「Font Awesome」を使用しました。 無料で、初めてでも簡単に使えるアイコンフォント「Font Awesome …