Google Web fontsをRailsで使いたい！
Webフォント使いたいなっと思って調べてみました。
最初単純にcssファイルで@importしてみたのですが、Heroku環境ではうまく反映されませんでした。HerokuにPushした時のログではプリコンパイルはうまくいってるような事を示していたのですが・・・。
app/assets/custom.css.scss
@import url('http://fonts.googleapis.com/css?family=Chango');
Google先生に聞いた所、以下のような外部CSSを読み込むような形でurlを指定して読み込むことができるとのことでした。
app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application", 'https://fonts.googleapis.com/css?family=Chango', :media => "all" %>
実際うまく反映されたのですが、フォントの種類が増えると非常にapplication.html.erbのheadがごたごたしてくるので嫌ですね・・・！１種類だけしか使わないっていう状況の方が少なそうですし。
そもそも単純なimportだとなぜ反映されないのか調べてみた所、HerokuではGoogle web fontsのhttp urlにセキュリティパラメータが設定されていたため、https通信しか受け付けていないそうです。
そこで、
app/assets/custom.css.scss
@import url('//fonts.googleapis.com/css?family=Chango');
こういった感じでhttpを省略することで、http通信かhttps通信どちらかに勝手に最適化されるのこの書き方が良いみたいです。ただこれだとローカル環境で反映したときに不具合が起こるとのことで、今回のケースはしっかりhttpsと明記したほうが良さそうです。
app/assets/custom.css.scss
@import url('https://fonts.googleapis.com/css?family=Chango');
他にもやり方があると思いますが、とりあえず今回はお手軽な感じでやってみました。
ちなみに、app/assets/fonts ディレクトリを作成して、その中のフォントファイルから反映させる方法でもできるらしいです。
こっちのほうがよりRailsらしい気もするので、今度やってみようと思います。