2011年10月24日
Webフォントを使ってみよう
橋本です。
今日は「Webフォント」のお話をしたいと思います。
「Webフォント」とは何かといいますと、CSSを使ってサーバーに置いてある任意のフォントをブラウザで指定する機能のことです。
Monacaを使用することで、iOSとAndroid向けのアプリケーションを一つのソースコードで作成することができます。
また、MonacaのアプリケーションはHTMLとCSSでデザインを作成するため、基本的には同じデザインのアプリケーションを作成することができます。
ただ、どうしても一点だけ違いが出てきてしまいます。
その違いというのが「フォント」です。
基本的にはiOSの端末に組み込まれているフォントとAndroid端末に組み込まれているフォントは異なりますが、
「Webフォント」を使用することで、iOSとAndroidの両方で同じフォントを使用することが可能になります。
では、Webフォントを使用する手順ですが、以下の2つの手順を踏みます。
- 「@font-face」でフォントの定義を行う
- font-familyで定義したフォントを指定する
まずフォントの定義ですが、上記のとおり「@font-face」文を使って定義していきます。
以下、例です。
@font-face {
font-family: 'GoodDog';
src: url('fonts/GoodDog.otf') format('opentype');
}
「font-family」には指定する際の名称を入力します。
「src」には、フォントファイルのurlとフォーマットをそれぞれ指定します。
今回は、フォントファイルを「www」フォルダの下の「fonts」フォルダに置いています。
あとは、webフォントを使用したい要素の「font-family」に、定義したフォント名を記載すればOKです。
h1 { font-family: 'GoodDog'; }
フリーのフォントを探すときには、以下のサイトが参考になるかと思います。
FONT SQUIRREEL
また、Google社が提供している以下のサイトも参考になるかと思います。
Google web fonts
