Tag:FontTwitterFacebookHatenaPocket今、沢山のフォントが紹介されていますが、今日はフォントの紹介ではなく、webフォントを使用する方法について書いていきたいと思います。APIの使い方はいたってシンプルで簡単です。フォント名を記述するだけになります。(現在501個のフォントがあります。)記述方法ですが、CSS内に@importで記述するHTMLのheader内に記述するjavascriptを記述する上記の3種類がありますので、お好きなモノを選択して下さい。APIサイトで書かれていますので参考にしてみてください。上記の図のQuick-useという文字をクリックすると書き方の詳細が表示されます。今回は、HTMLのheader内に記述する方法を書きたいと思います。以下をHTMLのheader内に記述します。type='text/css'>これで、選択したフォントが使える準備ができました。次にCSSに以下を記述し、HTML(使用したい場所)に反映させます。"使用するフォントの名前";}ここでは、bodyのフォントは、使用するフォントの名前にするということが書かれています。記述はこれで終わりです。公開されているフォントはすべてオープンソースですが、日本語は未対応です。好きなフォントをサーバーに置いて使用する。@font-faceを使って、ユーザーのPCに存在しないフォントもWeb上のフォントファイルをダウンロードして表示させます。フォントファイルは別ドメインから読み込むことはできないので注意してください。以下のようにCSSに記述します。使いたいフォントを決める(使うフォントの著作権などに気をつけてください)使える形式に変換する実際に使うです。WOFF形式やeot形式にすることです。図を見ていただけるとわかるのですが、対応するフォント形式がそれぞれに違います。それぞれに対応する形にしてあげなくてはなりません。ツールを使ってWOFF形式やeot形式に変換します。フォントとWOFFの相互変換を行うソフトで、サイトへいくと対応ブラウザの事なども詳しく書かれています。以降WOFFコンバータの使い方はとっても簡単です。変換を終えたらあとはアップロードして、以下の様に記述すれば使える様になります。nomal;}フォントファイルのurlは、相対参照で大丈夫です。して2種類ものファイルを作成しているかというとtruetypeで、大部分のブラウザをカバー出来ますが、IE8以前では対応していないのと、ライセンスの問題等がある為、現在はWOFF形式を使うのが一般的です。SafariやFirefoxも正式対応!CSS3のWebフォント(Webfonts)とは何かしかし、webフォントが対応していない古いブラウザもありますので、これでどんな環境で見ても自分の選んだフォントが表示されるというわけではありません。(swf)に置き換える仕組みなども考慮しなくてはいけないかなと思います。上記サイトがかなり参考になりました。this気に入っていただけましたらこちらから各ソーシャルサービスへシェアーをお願いしますTwitterFaceBookHatenaGoogle+EverNotePocketよく読まれているものWEBフォント使ってみたいけど、どうやって使うの?というお話おすすめ書籍HTML+CSSデザイン|基本原則、これだけ。Siteこのサイトは、WEBについての情報を発信していくプライベートブログです。技術的なことやWEBサービスについて等、『こんなのあったんだ』や『これ楽しそう』なことを書いていこうと思っています。ご意見・ご要望・ホームページの制作などお仕事の依頼等は、お問い合わせページよりお気軽にご連絡ください。Twitterブログ更新情報や気になることをツィートしています。