Wordpress/Movable Type プログラム

2013年12月12日 at 4:52 AM

Webフォントとは?(WOFF形式)

TrueTypeフォントやOpenTypeフォントでもそのままサイトの文字フォントに使うことが出来ますが、ライセンス管理情報が組み込まれていないのでコピペされて二次配布されてしまう可能性があります。そこで、

 

 

1.ライセンスや著作権の詳しい情報を盛り込む

2.Web専用に圧縮されて軽量

3.ただしパソコン上では使えない。Webでの表示専用

 

 

としてWeb Open Font Formatという形式のフォントが生み出されました。WOFF以外にもEOT(Embedded OpenType)やSVGという軽量フォントはありますがライセンスや軽量化などの技術は採用されていません。

 

 

 



◆簡単に作れる

Webフォントは、TrueTypeフォントから簡単にコンバートして作れてしまいます。他人のTrueTypeフォントに自分の著作権を埋め込んでしまうのも事実上可能です。

 

 

変換ツールには以下のようなものがあります。

 

WOFFコンバータ(ローカル上で使えるWebツール。Windows/Mac版あり)

@font-fave Generator(Webツールでここにアップロードしたフォントは自動的にWebフォントに変換されます)

 

 

 

◆WOFFフォントの使い方

CSS側

font-face {
   font-family:"pictexfont"  /*  識別子 */
   src:url("./webfont/pictex.woff")format('woff');  /* WOFFファイルのフォントパス */
}
.pictex {
   font-family:"pictexfont";  /* font-faceで指定した識別子を入力 */
}

 

 

複数のフォントを使い分けたければこのセットを複数用意します

 

 

HTML側

<p class="pictex">この部分がpictexフォントで表示される</p>

 

 

 

 

◆Webフォントサービスを利用する

自分でCSSを書いたりフォントファイルを用意しなくても簡単にWebフォントを実装できるサービスには以下のようなものがあります。

 

Google Web Fonts

無料で使えるが欧文フォントです。「Quick-use」を押すだけでそのWebフォントを利用するためのHTML、CSSコードが発行されます

 

 

 

デコもじ

和文フォントにも対応しています月額有料サービスです。Wordpressプラグインとしても用意されているので導入は簡単です。

 

 

 

 

インプレスから「Webフォントコレクション サイトデザインに差をつける ijデジタルBOOK フォント」という書籍も出ています。

この付属のCD-ROMには、使用許可が下りているフォントが180種類以上収録されています。

1890円なので、専用のフォントアプリを買うよりははるかに安いです

 

インプレス

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



こちらの関連記事もオススメ!