Google web font を使ってみた

Google web font を使ってみたのでその使い方のメモです。Google web font なら通常のWebフォントよりも簡単に導入できます。

初めて使ってみましたが、IEにも対応していて便利なものですね。日本語には対応していないので、アルファベットの部分に一部適用する程度の使用ですが、重さも気になりませんでした。

Google web font の使い方

まず、「Google Web Fonts」へアクセスし、使いたいフォントを探します。
Google Web Fonts

気になったフォントがあったらフォントのすぐ下にある”Pop out”をクリックすると、ポップアップで大きくフォントがみれます。
Pop out をクリック

”Add to Collection”をクリックすると左下にブックマークできます。
Add to Collection をクリック

そのフォントを使用する場合は、”Quick-use”をクリックします。
Quick-use をクリック

画面が移行され、フォントへのリンクコードとfont-famityの指定コードを出してくれます。

表示されているlinkタグをヘッド内へコピー&ペーストし、CSSファイルの指定したい要素に表示されている font-family を追加します。
linkタグが表示される

@importで使用する場合は、”@import”のタブをクリックして表示されているコードをコピーしてCSSファイルの一番上に張り付けします。
その下にfont-famityの指定が表示されていますので、フォント指定したい箇所へコピー&ペーストして完了です。
@import”のタブをクリックした画面

Googleウェブフォントのサンプルデモとキャプチャ

サンプルデモを作りました。IE6まで確認してみましたがちゃんと適用されていました。デモのコードは一番下にあります。

デモ

Webfont-demo|memocarilog

IEでみた場合のキャプチャ

(※クリックで大きい画像がみれます)

IE8でみた場合

IE8での表示

IE7でみた場合

IE7での表示

IE6でみた場合

IE6での表示

サンプルデモのコード

■CSS

@import url(http://fonts.googleapis.com/css?family=Emblema+One);
html { padding: 0; margin: 0; }
body {	padding: 0;
	margin: 0;
	font-family: 'Emblema One', cursive;}
h1,p {	padding: 20px 0; }
#container{ width: 600px; margin: 0 auto; padding: 0 50px;}
.text{  font-size: 100%; }

■HTMLのbody部分

<h1>Google Webfont-demo|memocarilog</h1>
<p>Google Webフォントを使ったフォントのデモページです。</p>
<img src="lotus.jpg" alt="lotus" width="600" height="399" />
<p class="text">
Lorem ipsum …
</p>
<p class="text">
Lorem ipsum …
</p>
<p><a href="https://memocarilog.info/webdesign/4170#sample">元のページへ戻る</a></p>

Related Article

2 Comments & Tracbacks

  • たそがれ 2012-06-22 12:21 AM

    お試しでやってみました。
    CSS読み込み・直付。すべてのパターンで可能でした!
    参考になりました!

    Reply

    • saori 2012-06-22 2:23 PM

      コメントありがとうございます!
      Googlefontはお手軽に使えそうですよねー。
      参考にして下さってありがとうございました!!

      Reply

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル コンテンツ Facebook 素材 php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ