CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Mizoue

Web Fontsを使って遊んでみました!

by Mizoue on

みましたシリーズのサンプルも第5弾まで来ました。
今回はWeb Fontsです。

デザイナー:「Webフォント使ってサンプルつくってみようか」
俺:「じゃーそれで」

こんな感じでノリで決まりました。
そんなわけで良いフォントないかなーと思いながら探していると・・・

【使用させていただくフォント】
▼SecondWave » 手書き風総合書体 – きろ字
http://www.ez0.net/distribution/font/kiloji/

クオリティ高い・・・!
早速このフォントをダウンロードし、サックリと作ってみました。

フォントが適用されるまで時間がかかるのがちょっと問題ですが
こんな感じにフォントで遊ぶことが可能です。
使いどころが難しいですが、英字のみのフォントならそれほど重くないため
ポイントを絞って使っていくのが良いと思います。

使い方もいたってシンプル&簡単。

@font-face {
	font-family: 適当な名称を自分で付ける;
	src: url(ttf形式のフォントファイルへのパス) format("truetype");
}
body {
	font-family: 上で付けた適当な名称;
}

コレだけです。
なんて簡単。

本当にこれだけなので、ちょっとさびしいなぁと思い
フォントを切り替えれるようにしてみました。
下記セレクトボックスから色々とフォントを切り替えてください。
※切替には少々時間がかかるかも知れません


【今回使用させていただいたフォント】
▼SecondWave » 手書き風総合書体 – きろ字
http://www.ez0.net/distribution/font/kiloji/

▼オープンソース情報データベース » IPAexフォント(ver.001)
http://ossipedia.ipa.go.jp/ipafont/index.html

▼Gutenberg Labo » GL-アンチックPlus (アンチゴチ体)
http://gutenberg.sourceforge.jp/font/ja.html

他にもオススメのフォントがありましたら教えてください!

Subscribe:
pagetop