読者です 読者をやめる 読者になる 読者になる

文系プログラマによるTIPSブログ

文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。

【eot,svg】Grailsでwebフォントのmimeタイプを設定する【ttf,woff】

grails

最近grailsを勉強しています。
grailsにレスポンシブフレームワークであるionicを入れて、IOS7風のUIを試してるのですが、どうもwebフォントが読み込めていません。webフォントと言えば最近Font Awesomeでも全く同じ現象が起こっていたので、もしやと思って試したらやはり以前と同じ原因でした。
Ionic: Advanced HTML5 Hybrid Mobile App Framework
Grails - The search is over.

まず、ionicでは以下の4種類のwebフォントが読み込めないとエラーが発生しました。

  • woff(Web Open Font Format)
  • eot(Embedded OpenType)
  • svg(Scalable Vector Graphics)
  • ttf(True Type Font)

webフォントはwikipedia先生が以下のように解説しています。

元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。またはWebサーバー上に置かれるフォント自体をWebフォントと指し、フォントをWebで利用するよう提供するサービスをWebフォントサービスとして区別する。

http://ja.wikipedia.org/wiki/Web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88

grailsの通常設定ではこれらは読み込ません。
mimeの設定がされていないため、読み込めないのです。

では早速修正しましょう。

Config.groovyを修正

Config.groovyのgrails.mime.typesセクションを修正します。
初期状態では以下のようになっています。

grails.mime.types = [
    all:           '*/*',
    atom:          'application/atom+xml',
    css:           'text/css',
    csv:           'text/csv',
    form:          'application/x-www-form-urlencoded',
    html:          ['text/html','application/xhtml+xml'],
    js:            'text/javascript',
    json:          ['application/json', 'text/json'],
    multipartForm: 'multipart/form-data',
    rss:           'application/rss+xml',
    text:          'text/plain',
    hal:           ['application/hal+json','application/hal+xml'],
    xml:           ['text/xml', 'application/xml']
]

これを以下のように修正します。

grails.mime.types = [
    all:           '*/*',
    atom:          'application/atom+xml',
    css:           'text/css',
    csv:           'text/csv',
    form:          'application/x-www-form-urlencoded',
    html:          ['text/html','application/xhtml+xml'],
    js:            'text/javascript',
    json:          ['application/json', 'text/json'],
    multipartForm: 'multipart/form-data',
    rss:           'application/rss+xml',
    text:          'text/plain',
    hal:           ['application/hal+json','application/hal+xml'],
    xml:           ['text/xml', 'application/xml'],
    eot:           'application/octet-stream',
    svg:           'image/svg+xml',
    ttf:           'application/x-font-ttf',
    woff:          'font/x-woff'
]

末尾の4行を追加しました。
これで無事読み込めるようになります。

最近のレスポンシブフレームワークでは、アイコン画像にwebフォントを利用する事が非常に多いので、忘れずに覚えておくとよいかと思います。

なお、以前の記事でFont Awesomeがnginxで表示できない件も全く同じ理由でmimeの設定漏れでした。
【404】font-awesomeがnginx上で404になる件【bootstrap】 - treeのメモ帳

Grails徹底入門

Grails徹底入門

  • 作者: 山田正樹,山本剛,上原潤二,永井昌子,杉山清美,杉浦孝博,笠原史郎,香月孝太,福岡竜一,伊堂寺北斗
  • 出版社/メーカー: 翔泳社
  • 発売日: 2008/08/26
  • メディア: 大型本
  • 購入: 3人 クリック: 42回
  • この商品を含むブログ (28件) を見る
プログラミングGROOVY

プログラミングGROOVY