自作したフォントを公開して Web フォントとして利用する方法.
以下は馬酔木明朝を font-family: Asebi;
として利用する例.
フォントファイルをホストするサーバをえらぶ. 以下の条件をみたす必要がある.
- 数 MB ほどのファイルをアップロードできる
.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 フォント化は以上で完了.
Web フォントを使用するサイトに以下を記述する.
- CSS への link(
rel="stylesheet"
を書かない)
<link href="http://www.example.com/Asebi.css" id="webfont">
rel="stylesheet"
を追加する javascript
<script> (function(){ var webfont = document.getElementById('webfont'); webfont.rel = 'stylesheet'; })(); </script>
以上で Web フォントが利用できる.
span.webfont { font-family: Asebi,serif; }