アシアルブログスマートフォン用の表示で見るアシアルブログアシアルの中の人が技術と想いのたけをつづるブログです2011-10-24Webフォントを使ってみようMonacaTweet橋本です。今日は「Webフォント」のお話をしたいと思います。「Webフォント」とは何かといいますと、CSSを使ってサーバーに置いてある任意のフォントをブラウザで指定する機能のことです。Monacaを使用することで、iOSとAndroid向けのアプリケーションを一つのソースコードで作成することができます。MonacaのアプリケーションはHTMLとCSSでデザインを作成するため、基本的には同じデザインのアプリケーションを作成することができます。しても一点だけ違いが出てきてしまいます。その違いというのが「フォント」です。「Webフォント」を使用することで、iOSとAndroidの両方で同じフォントを使用することが可能になります。Webフォントを使用する手順ですが、以下の2つの手順を踏みます。「@font-face」でフォントの定義を行うfont-familyで定義したフォントを指定するまずフォントの定義ですが、上記のとおり「@font-face」文を使って定義していきます。format('opentype');}「font-family」には指定する際の名称を入力します。「src」には、フォントファイルのurlとフォーマットをそれぞれ指定します。今回は、フォントファイルを「www」フォルダの下の「fonts」フォルダに置いています。あとは、webフォントを使用したい要素の「font-family」に、定義したフォント名を記載すればOKです。フリーのフォントを探すときには、以下のサイトが参考になるかと思います。SQUIRREELまた、Google社が提供している以下のサイトも参考になるかと思います。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。