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

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

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

関連記事

no image

Creative Cloud デスクトップアプリケーションが「サインアウトしています」と表示し、サインインできないとき

この記事は約 1 分で読めます。 時々、Adobeのソフトは使える状態なのに、Creative Cloudにデスクトップアプリケーションにサインインできないことがあります。 私の場合は、「サインアウト …

no image

WordPressでオリジナルテーマ作りにチャレンジ7【page.php編】

この記事は約 1 分で読めます。WordPressのオリジナルテーマ作りにチャレンジしています。 前回までで一通り表示は出来るのですが、今回気になるのは固定ページ。 お問い合せフォームの上にページをい …

no image

Google Mapの吹き出しを消してみた

この記事は約 1 分で読めます。 Google Mapをサイトに表示させる方法は、たくさんあると思います。 単純にGoogleMapを開いて、「ウェブサイトへの地図埋め込み用 HTMLコード」をそのま …

no image

WordPress はじめてのオリジナルテーマ作り。【まとめ】

この記事は約 1 分で読めます。 昨年の11月に、私はWordpressのオリジナルテーマをはじめて作成しアップしました。 はじめてなのでまだ高度な事は出来ていませんが、今まで幾つか書きためた記事をこ …

no image

WordPress記事中の文章をコピーしたら管理者にお知らせしてくれるプラグイン「Check Copy Contents(CCC)」を試してみた

この記事は約 2 分で読めます。 私の過去記事で人気なのが、「画像のコピーガード」。画像を盗用されることに対して対策を打ちたい方がたくさんいらっしゃるのでしょう。 もしこれが記事中の文章においても、コ …