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

WordPressプラグイン「Audio Player」でMP3音源を簡単に再生してみた

この記事は約 1 分で読めます。 WordPressでMP3オーディオプレーヤーを表示させてくれるプラグイン「Audio Player」を試してみました。 「Audio Player」は、Flashで …

no image

Evernote Webクリッパーを入れてみた♪

この記事は約 1 分で読めます。Web上で興味を持ったページの情報をそのまま手軽にEvernoteに保存する方法を試してみたいと思います。 日頃使っているEvernoteの便利な使い方その2です。(2 …

no image

WordPress 管理画面でメモが自由に書けるプラグイン「Plugin Memorandum」

この記事は約 1 分で読めます。 WordPressには便利なプラグインがたくさんあって、いろいろ試していたら・・・気がつくと大量のプラグインで画面がいっぱい!!「コレ何だったっけ?」というプラグイン …

no image

WordPress the_excerpt()を使った抜粋にチャレンジ

今回は、「抜粋」をテンプレートタグthe_excerpt()を使って実現する方法にチャレンジしてみました。

no image

サイトマップを作ってみた♪

この記事は約 1 分で読めます。 Webサイトを作った後にするコト。 検索エンジンにページの存在を知らせ、クローラーの巡回を促すために作る「sitemap.xml」を作りたいと思います。 いくつもある …