SQLの窓

2015年08月07日


WEB フォントをクロスドメインで利用する

prototype.js でクロスドメインの Ajax の読み込みテスト と同じで、http ヘッダーに、「Access-Control-Allow-Origin: *」を指定すると利用可能になります。

Google ドライブを使うのが簡単です

IE8 の場合は、指定しなくても動くような気もするのですが(一応テストしていますが、動作したので)、Firefox では、http ヘッダーを読んで、このヘッダーが無いと読み込みをキャンセルしています。( Firebug の 接続で読み込み時間を見ているとそんな感じ )

Ajax では、PHP で出力すれば良かったですが、フォントは .htaccess に指定します。
header add Access-Control-Allow-Origin *
※ ヘッダ名には最後にコロンを含めることもできますが、無くても構いません。
※ set, append, add, unset では大文字小文字は 区別されません。
※ add, append, set では value を三つ目の 引数として指定します。
※ value に空白がある場合は二重引用符で 囲む必要があります。
( 空白がなければ、二重引用符は必要無い )

Firebug で確認しましたが、戻ってきたヘッダーは以下のようになっています。
Server: ZWS
Date: Wed, 27 Apr 2011 23:32:49 GMT
Content-Type: text/plain
Content-Length: 392828
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Last-Modified: Wed, 27 Apr 2011 07:46:17 GMT
実際の記述方法は以下を参照して下さい。
WEB フォントの記述方法の考察
りいポップ
webフォントとしてもご利用可能です(2012.9.3より)。
※webフォントとしてご利用になる場合、ファイル形式の変換はご自由にしてくださってOKです。

▼ ブログ記事用( りいポップ角で使用しています )
<script>
if ( !window[window.location.hostname+'.FancyBalloons'] ) {
	window[window.location.hostname+'.FancyBalloons'] = true;
	(function() {
		var str="";
		str+="<style> \n";
		str+="@font-face { \n";
		str+="    font-family: 'fb'; \n";
		str+="    src: url('https://googledrive.com/host/0B9Jymqpro6gSVlB5Wm52U29wTlE/font/riipopkkr.woff') format('woff'); \n";
		str+="} \n";
		str+="</style> \n";
		document.write(str);
	})();
}
</script>
<style>
#web_font_content {
	font-family: 'fb';
	font-size:60px;
}
</style>
<span id="web_font_content">りいポップ</span>

※ この記述は、表示されているページで必要な CSS の記述を一度だけにする方法です

また、IE 用の .eot のフォントファイルを作成するのは、以下のサイトより。
ttf2eot

ですが、WOFF を使うのが現実的だと思います。変換は以下のサイトで( ファイルサイズは、0.4M までです )
ttf to woff converter


▼ woff2 用
ttf to woff2 converter

※ IPA フォントは WEBフォントとして使用できます。但しライセンス表記に注意です

OTF を TTF に変換したい場合は、以下のサイトが利用できます。
Online font converter

ですが、fontforge-cygwin を使うほうが確実です。
使い方としては、こちらが参考になります( と言うか参考にして実運用しています )

※ 最近単一化がグレイアウトされているフォントに時々出会いますが、そのまま ttf へ出力可能っぽいです。

関連する記事

2014年7月7日現在。WEBフォントの実際



【記録の最新記事】
posted by lightbox at 2015-08-07 12:31 | 記録 | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり