memocarilog

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」へアクセスし、使いたいフォントを探します。

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

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

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

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

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

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

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

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

（※クリックで大きい画像がみれます）

IE8でみた場合

IE7でみた場合

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>