EC-CUBE3でもWebFont使ってみる？Google Fonts導入方法。[Noto Sans Japanese]

EC-CUBE運営サイト「ネットショップの壷」でWebFontのことが記事になってました。
せっかくですので、この「Noto Sans Japanese」をEC-CUBE3のフロントに適用させてみましょう。

#EC-CUBE3のCSSファイル

フロント側のCSSはこの↓フォルダの中にあります。
/html/template/default/css/

デフォルト状態で、フロント側のCSSファイルは以下の4つが上から順に読まれます。

• bootstrap.custom.min.css (リセットと、主にグリッドレイアウトとボタン用)
• style.css (主に各パーツの表示再現用)
• slick.css (スライダー「slick.js」用)
• default.css (デフォルトのデザインを再現するための細かい指定用)

イメージとしては、上の3つが基本デフォルトCSSセットで、残りのdefault.cssは、2系でいうところの「デザインテンプレート」で使用するCSSという感じです。

#早速、CSSファイルを編集

カスタマイズするためにはテンプレートを新たに作成することが推奨されていますが、今回はさくっと、デフォルトのCSSをいきなり編集したいと思います。

今回触るCSSファイルはdefault.cssです。
先ほど少し触れましたがdefault.cssは、2系でいうところの「デザインテンプレート」で使用するCSSというイメージですので、他のCSSファイルよりも断然危険度が低いです。

このdefault.cssのスタイルの記述が始まる一番最初(おそらく11行目あたり)を以下のように修正すれば完了です。

default.css

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);/* ←追記 */
body {
    font-family: 'Noto Sans Japanese', serif; /* ←下の記述をこのように書き換える */
    /* font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;　←旧の記述 */
/* ~~~以下略~~~ */

これだけで、フロントのフォントがことごとくすべて「Noto Sans Japanese」に変わります。
ね？簡単でしょ？

#最後に少しだけ注意点

一目瞭然ですが、フォント指定が'Noto Sans Japanese', serifと2つだけなので、もし万が一なんらかの理由でNoto Sans Japaneseが表示されない場合は、環境によってはMS P ゴシックなどのちょっと残念なフォントが表示される場合があります。

あと、キャッシュされるまではWebフォント(特に日本語フォント)は重いので、文字が表示されるまでのタイムラグは今のところ避けられないです。
これは、将来的に日本語Webフォントを取り巻く環境(利用人口の増加など)によって何とかなってくれるに違いないと私は個人的に信じています！信じたいです！

---

いかがでしたか？

明日は@yangsinさまです。明日もノンプログラマー向け記事ですね！