Google web font を使ってみた

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

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

Google web font のサンプルデモ

See the Pen Google web font を使ってみたサンプル by Saomocari (@Saomocari) on CodePen.

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ウェブフォントのサンプルのキャプチャ

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