Web技術トピック&コラム

Design Topic 2014.08.26 (Tue)

デザインの幅が広がる!【Webフォントについて】

WebフォントはやっぱりGoogle

いまさらな感じもしますが、Webフォントについて書きたいと思います。
うまく使えば、デザインの幅も広がりますし、SEO的にも画像よりテキストの方が優位とされています。

  • ※ちなみにこのブルーアートのサイトも英字はWebフォントを使用しています。

ただ、日本語のWebフォントはいまだに多くはありません。
英語の書体ならやはりGoogleのものが多く種類もあって使いやすいです。

http://www.google.com/fonts

上記サイトから使用したいフォントを見つけたら"quick use"という右矢印のボタンを押します。

インポートするフォント記述のサンプルソースもあるのであとはコピペして使うだけです。

Webフォント 使用例

フォントのインポート

<link href="http://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">

CSSの記述

.webfont {
	font-family: "Indie Flower", sans-serif;
}

フォントの適用

<div class="webfont">Web Font Test</div>
適用後の例

Web Font Test

Webフォント 応用編 エフェクト効果

また「エフェクト」的な効果をパラメータを追加することで付加できます。
エフェクトの種類は下記サイトから見られます。

https://developers.google.com/fonts/docs/getting_started

フォントのインポート

&effect=fire-animationを付加。

<link href="http://fonts.googleapis.com/css?family=Indie+Flower&effect=fire-animation" rel="stylesheet">

フォントの適用

<div class="webfont font-effect-fire-animation">Web Font Test</div>
適用後の例

Web Font Test

  • ※IEではエフェクト効果は表示されないみたいですね...

Web技術トピック&コラムの一覧へ