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.

関連記事

no image

Creative Cloud デスクトップアプリケーションが何も表示しなくなったとき

この記事は約 1 分で読めます。 Adobe Creative Cloudを使用していて、ディスクトップから起動させようとすると、画面が真っ白になってしまいました。 それぞれ単体のソフト(Photos …

no image

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

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

no image

レスポンシブサイト制作にチャレンジ。

この記事は約 1 分で読めます。最近、気になっているのが「レスポンシブWebサイト」。 1つのHTMLで、スマートフォンやタブレットなど小さな画面とパソコンなどの大きな画面で見た場合と見た目を切り替え …

no image

Yahoo!アクセス解析を設定してみました!

この記事は約 1 分で読めます。 2013年10月30日にリリースされた「Yahoo!アクセス解析」。 まだまだリリースされて日が浅いのでGoogle Analyticsほどの資料が見つからないのです …

no image

WordPress.comの便利機能が入ってる 「Jetpack」を試してみた♪

この記事は約 1 分で読めます。 アクセス解析プラグイン「WordPress.com Stats」をずっと使っていました。 他にもアクセス解析の勉強のために使用しているものがあるのですが、一番よく見て …