アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

Webフォントを使ってみよう

橋本です。

今日は「Webフォント」のお話をしたいと思います。

「Webフォント」とは何かといいますと、CSSを使ってサーバーに置いてある任意のフォントをブラウザで指定する機能のことです。

Monacaを使用することで、iOSAndroid向けのアプリケーションを一つのソースコードで作成することができます。
また、MonacaのアプリケーションはHTMLとCSSでデザインを作成するため、基本的には同じデザインのアプリケーションを作成することができます。
ただ、どうしても一点だけ違いが出てきてしまいます。
その違いというのが「フォント」です。

基本的にはiOSの端末に組み込まれているフォントとAndroid端末に組み込まれているフォントは異なりますが、
「Webフォント」を使用することで、iOSAndroidの両方で同じフォントを使用することが可能になります。

では、Webフォントを使用する手順ですが、以下の2つの手順を踏みます。

  1. 「@font-face」でフォントの定義を行う

  2. 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