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>

Comments 2

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

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

コメントを残す

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