2010年05月11日

デコもじを使わずにwebフォント

デコもじというサービスがあります。
自分のブログのフォントを変えてくれるサービスですね。
けれど、無料でフォント変えてみたい方も多いと思います。

このブログをWindows版safariで見たらこうなります↓(現在は別フォントです)
webfont.PNG


以前までは、ブログやサイト側のCSSなどでフォント指定しても、それを見ている人のパソコンにそのフォントがインストールされてなければ、意味がありませんでした。

そこで開発されたのがwebフォントです。
これは、ブログやサイトがフォントデータを用意しておき、来訪者のPCにフォントが無くても、そのフォントをその場で読み込んで表示させるものです。
これで、相手のPCに入ってないフォントでも表示する事が可能になりました。
デコもじはそのサービスでもあります。
インターネットの高速大容量化で、フォントファイル程度の読み込みは大した負荷にならくなってきましたからね。
(このブログでは約6MBのフォントファイルを読み込んでいます。)

ただし、一部正常に表示されない事があります。
・ブラウザが対応してない場合。
・端末(iPhoneなど)が対応してない場合。
・ブラウザのバージョンが古い場合。
・ブラウザの設定等でweb指定のフォントを無視している場合。
などでは、webフォントでは表示されません。

それでは、webフォントの設定を説明したいと思いますが、その前に注意する事があります。
フォントは著作権物だという事です。例えば、メイリオなどは誰でもマイクロソフトの公式からダウンロード出来ますが、決してフリーフォントでは無いという事です。
ですので、webフォントに使うフォントはフリーフォント、または自分が著作権を所有しているフォントにしてください。
まぁ、メイリオくらいならお咎めないかもしれませんが、念の為です。

では、まず使用したいフォントを用意します。使えるフォントはttfかotfになります。(IEのみeot)
このブログで使用しているフォントはこちらの「うにフォント(プロポーショナル)」です。

フォントが用意できたらアップロードします。
seesaaブログの場合で説明します。
記事投稿→ファイルマネージャで用意したフォントをアップロードします。アップロードされたフォントファイルのURLをコピーしておいてください。

続いて、デザイン→デザイン一覧から、現在自分のブログで使用しているテーマを開いてCSSを表示します。

CSSのトップに

@font-face {
font-family:xxxxxx;
src:url(コピーしておいたURL) format("TrueType");
}


と記述します。
xxxxxxの名前はなんでも構いません、解りやすい名前にしておいてください。
otfの場合はformat("OpenType")に変更してください。

そして、全体にこのフォントを使用したいのなら、

body {
font-family: xxxxxx,メイリオ,osaka;
}

body部分にさっき指定したフォントを追加してやります。
これでブログ全体が指定したフォントになります。
部分的に使用したいのであれば、bodyには記述せずに該当部分で記述してください。

これで表示されるようになると思います。されない場合は一度他のブラウザ等で確認してみてください。













P.S.


少しwebフォントが重かったので、軽めのしねきゃぷしょん(約1MB)に変更しました。





firefoxは制限により別ドメインのwebフォントは使用できません。
ですので、コピーしておいたURLの.up.seesaa.net.upを消して登録してください。





IEはttf otfに対応しておらず、独自の「eot」フォーマットに変換して登録してやる必要があります(バカジャネーノ?)
糞めんどくさいですけど、一応手順を書いておきます。
ttfの場合で説明します。
用意したttfをttf2eotでeotに変換します。
そしてそれをアップロードし、IE用のcssを追加します。
IE用にはformat指定は必要ありません。
以下こういう感じになります↓

/* IE用 */
@font-face {
font-family:xxxxxx;
src:url(eotのURL);
}


/* IE以外用 */
@font-face {
font-family:xxxxxx;
src:url(コピーしておいたURL) format("TrueType");
}

糞IEのおかげでわざわざもう一つフォントファイルを用意してやらなければならないワケです。バカかと。
IE使ってる人はとっとと他のブラウザに乗り換える事を強くオススメします。







特定の部分だけwebフォントにするには、cssのbody部分のwebフォントは削除し、ブログ・サイトのhtmlで
<span style="font-family : 'xxxxxx'">webフォントを使用したい部分</span>で囲ってやってください。(firefox非対応)





★総括すると、IEは独自フォーマット、firefoxは制限ありという事で、webフォントに関してはsafari、Chrome、Operaが今の所融通が利いて有利です。

色々総合的に見ると表示に関してはやはりsafariが一歩リードしてる感じです。










関連記事
☆星のまにまに☆ Webfontを入れてみた
【Seesaa ブログ】ブログの文字を変更できる「デコもじ」機能提供開始のお知らせ



posted by anarchy0929 at 15:27| Comment(3) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
アクセス解析から来ました 星まにブログの管理人 荒巻ゆきです

ウチのブログを参考にして頂いたようで お役に立てたのなら嬉しいかぎりです
Posted by 荒巻ゆき at 2010年06月11日 21:32
>>荒巻さん
大変参考になりました〜^^
Posted by anarchy at 2010年06月11日 22:15
デコ文字を使おうかと考えていたので、とても助かりました。ありがとうございます!
Posted by 中島 at 2011年07月18日 14:29
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/149542716
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。