Web Fonts

The Characteristics of a Typeface (for widescreen displays)
Web Fonts や Icon Fontsの使い方を紹介します。

photo credit: arnoKath via photopin cc


Google Web Fonts


Google Web Fontsというものがあります。これを使うことで、Bloggerでもカスタムフォントを使えるようになるらしいです。


Bloggerでカスタムフォントを使うには、 こちらの記事が参考になります。


We Love Icon Fonts


We Love Icon Fontsというものがあります。これは、アイコンをフォントのように利用するものです。CSSの記述から使用できるので、非常に便利そうです。


webfont (1)


試してみました。使えるフォントの種類は、8種類あるようです。記述は使用するものだけでOKです。

@import url(http://weloveiconfonts.com/api/?family=brandico|entypo|fontawesome|fontelico|maki|openwebicons|typicons|zocial);

/* brandico */
[class*="brandico-"]:before {
font-family: 'brandico', sans-serif;
}

/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}

/* fontawesome */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}

/* fontelico */
[class*="fontelico-"]:before {
font-family: 'fontelico', sans-serif;
}

/* maki */
[class*="maki-"]:before {
font-family: 'maki', sans-serif;
}

/* openwebicons */
[class*="openwebicons-"]:before {
font-family: 'OpenWeb Icons', sans-serif;
}

/* typicons */
[class*="typicons-"]:before {
font-family: 'Typicons', sans-serif;
}

/* zocial */
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}


ここで、例えば、 entypoentypo-homeを使ってみるとします。


webfont


<span class="entypo-home"></span>

<ul>
<li class="entypo-home"></li>
</ul>



.......。


どうやらBloggerでは通常の手順では無理らしいですね。それとも個人的な設定の問題でしょうか。


追記


ハイライトされている行を検索し、それ以降を追加します。すると、BloggerでもWe Love Icon Fontsのカスタムフォントを使用できるようになります。

<head>

<link href='http://weloveiconfonts.com/api/?family=brandico|entypo|fontawesome|fontelico|maki|openwebicons|typicons|zocial' rel='stylesheet' type='text/css'/>



Icon Fonts


5 Use Cases for Icon Fontsという記事に注目のデモが公開されています。すごいですね。