自作フォントを Web フォント化する

README.md

自作フォントを Web フォント化する

自作したフォントを公開して Web フォントとして利用する方法.

以下は馬酔木明朝を font-family: Asebi; として利用する例.

1. サーバをえらぶ

フォントファイルをホストするサーバをえらぶ. 以下の条件をみたす必要がある.

• 数 MB ほどのファイルをアップロードできる
• .htaccess を設定できる

2. フォント, CSS, .htaccess をサーバにアップロード

フォントは .otf と .woff の 2 形式でアップロードしておく.

• AsebiMin-Regular.otf
• AsebiMin-Regular.woff

CSS には @font-face を記述する.

例: Asebi.css

 @font-face {
  font-family: Asebi;
  src: local('Asebi Mincho Regular'), local('AsebiMin-Regular'),
       url('AsebiMin-Regular.woff') format('woff'),
       url('AsebiMin-Regular.otf') format('otf');}

.htaccess にはアクセス許可の設定, キャッシュの設定, 圧縮の設定を記述する.

 <Files ~ ".(otf|woff|css)$">
  Header append Access-Control-Allow-Origin: *
 </Files>
 
 <Files ~ ".(gif|jpe?g|png|ico|otf|ttf|eot|woff|gz)$">
  Header set Cache-Control "max-age=2592000, public"
 </Files>
 <Files ~ ".(css|js|html)$">
  Header set Cache-Control "max-age=86400, public"
 </Files>
 
 <IfModule mod_mime.c>
 	AddType font/opentype         .otf
 	AddType font/eot              .eot
 	AddType font/truetype         .ttf
 	AddType application/font-woff .woff
 </IfModule>
 <IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE font/opentype font/eot font/truetype application/font-woff
 </IfModule>

Web フォント化は以上で完了.

3. サイト上で Web フォントを利用する

Web フォントを使用するサイトに以下を記述する.

1. CSS への link（rel="stylesheet" を書かない）

 <link href="http://www.example.com/Asebi.css" id="webfont">

2. rel="stylesheet" を追加する javascript

 <script>
 (function(){
  var webfont = document.getElementById('webfont');
  webfont.rel = 'stylesheet';
 })();
 </script>

完成

以上で Web フォントが利用できる.

 span.webfont {
  font-family: Asebi,serif;
 }

参考リンク

• web-tan.forum.impressed.jp
• h2ham.net