Googleからホストされているwebfontで実装して、CSSにインポートなどをしている方が多くいますが、ファイルサイズを見てみると非常に重いケースが多々あります。ウェブサイトでのパフォーマンスは検索順位にも影響しますので、実装する時には注意が必要。今回はRuby on Railsで開発しているウェブサービスにウェブフォントを導入する時の流れをご紹介します。
そもそもRuby on Railsでの開発に慣れていないという人
Ruby on Railsは独学でも始められるようにチュートリアルなどが充実しています。
チュートリアルでまずは写経して確認すること
なので、かなり初心者でも利用している人が多いですが、こういったバージョンの違いによって詰まってしまったり、コピペして使っているとどこが間違っているのかわからないで、他のサイトで質問しているというのをよく見かけます。
しかしこれは全く勉強になっていません。自分で学びつつ、どこがダメかしっかりみて先に進める必要があります。本気でRuby on Railsを学習したいのであれば、スクールに通って缶詰で1ヶ月集中してやるなどの方が良いでしょう。
ウェブフォントのサブセット化
Googleが提供しているウェブフォントのサイトからまずは欲しいウェブフォントをダウンロードして来ます。この際ライセンスが無償で使っていいものなのかは確認するようにしておきましょう。
サブセット化に必要なものは下記になりますので、あらかじめダウンロードしておくようにしましょう。一番上のリンクはフォントファイルが並んでいるGoogleのサイトです。欲しいウェブフォントを選んでみてください。
Googleのサイトからフォントファイルをダウンロード
Noto Sans Japanseフォントファイル
https://www.google.com/fonts/earlyaccess
サブセット化するフォントメーカーをダウンロード
無料のサイトですので、安心してダウンロードしてください。
サブセットフォントメーカー
http://opentype.jp/subsetfontmk.htm
woffコンバーター
http://opentype.jp/woffconv.htm
フォントをダウンロードしたら、ダウンロードしたファイルを一番上の窓で参照してください。
その下の参照、ファイルパスの入力できるところはコンバートした後のファイルの保存先を設定してください。他は特にやることがなく入力終了して、そのままコンバーターを起動するようにして保存します。
格納する文字のところに下記のサイトから文字列をコピーしてくるようにします。
この後にコンバーターを作成開始から起動するようになります。
ウェブフォントを利用できるフォント作成
「woffコンバータ」を利用して、ウェブフォントとして利用できるフォントを生成するために利用します。
「EOTファイルを作成する」にチェックを入れて作成するように注意しましょう。
上記のサイトの例だと普通にCSSから読み込んでいますが、Railsではバージョンによっても異なりますし、うまくいきません。
出来上がったファイルをこれから先のフォントファイルの指定方法を参考に読み込んでみてください。
Ruby on RailsでのCSS設定
Railsは現在バージョンが５まで開発されていますが、それぞれのバージョンで機能が変わったり、書き方が変化します。初心者がRailsを始めた時にこの違いで迷ってしまう事もあります。今回はサブセット化したウェブフォントをどうやって読み込むかをご紹介します。
Rails5ではSCSSを利用してCSSで書かない
SCSSに用意されているasset-pathを利用します。これはもちろん普通のCSSでは用意されている機能ではありませんので使えません。なので、SCSSファイルで記述する必要があります。
SCSSでの記述例
非常にシンプルで、ウェブフォント化した時に使いたい名前が、font-family、その下の記述が、読み込みたいフォントファイル名です。
このフォントファイルはアプリケーションの中の/assets/fonts以下に格納します。よくvendorに設置する人がいますが、正しい位置はassets以下ですので注意するようにしましょう。
@font-face {
font-family: "Icons";
src: url((asset-path('Icons.eot')));
src: url((asset-path('Icons.eot?#iefix'))) format('eot'),
url((asset-path('Icons.woff'))) format('woff'),
url((asset-path('Icons.ttf'))) format('truetype'),
url((asset-path('Icons.svg#Icons'))) format('svg');
}
こちらは、アイコンとして使う用のウェブフォントを読み込んでいますが、普通にbodyやpタグで利用したいという場合はこのような形になります。
これはNotoというウェブフォントを利用している例です。asset-pathを利用して、ウェブフォントのファイルを読み込んでいますね。
@font-face {
font-family: 'Noto Sans Japanese';
font-style: normal;
src: url((asset-path('NotoSansCJKjp.woff'))) format('woff');
}
body {
font-family: 'Noto Sans Japanese', sans-serif, "Helvetica Neue",Helvetica,Arial,"Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo !important;
}
これで簡単にウェブフォントをサブセット化して、ウェブフォントを読み込めるようになりましたね。
rails4でのCSSの設定
rails4ではこちらのfont-pathを使った設定をご紹介している記事がありましたが、これは動作確認してみた所５だと動きませんでした。
rails 4.2で fonts をvendor/assets/fontsに追加してCSSから読む
Ruby on Railsをこれから学習したいという方はこちらの記事もチェック。
