Sass(SCSS)でフォント読み込むときはmixinを使うべきと悟った話 #CSS

「Sass(SCSS)において外部ファイルからフォントを読み込む際、どう読み込むべきか」の話です。

CSSからSassに本格的に乗り換えてまだ日の浅いこの頃、外部ファイルとして存在するフォントをどう「SASSっぽくスマートに」読み込むにはどうすべきか探っていて数時間模索してました。その結論を端的に書き残します。

1. mixin使え

まずフォントを読み込み際にいちばんナンセンスなのは変換後のCSSにべた書きすること。これはひどい。ではSASSのポテンシャルを引き出しつつスマートに書くにはどうすべきか。と考えてmixinに至りました。まずmixinディレクトリ内に_fonts.scssを用意、もしくは_mixin.scss自体に下記のコードを書き込みます。

/mixin/_fonts.scss

@mixin font-face($name, $path, $weight: null, $style: null, $exts: otf ttf) {
  $src: null;

  $formats: (
    otf: "opentype",
    ttf: "truetype"
  );

  @each $ext in $exts {
    $format: map-get($formats, $ext);
    $src: append($src, url(quote($path)) format(quote($format)), comma);
  }

  @font-face {
    font-family: quote($name);
    font-style:  $style;
    font-weight: $weight;
    src: $src;
  }
}

この記述は「あとでインクルードするのがスーパー楽」かつ「複数のフォントタイプ指定可能」かつ「スタイル等もインクルードの際に変数として指定できる」ことを目指して行き着いた形です。この例では読み込むフォントがotfとttfの場合みを想定した記述になっていますが、需要に併せて追加していけます。

2. importしろ

次にこのmixinファイルを他のSCSSファイル達とともにインポートします。style.scssまたは他の任意のマニフェストファイルに読み込みましょう。

style.scss

@import './mixin/fonts';

これで先ほどのフォントmixinをインクルードする準備が整いました。

3. includeしろ

インクルード場所に関しては諸意見ありますが、今回はマニフェストファイル内にそのままインクルードします。

style.scss

@import './mixin/fonts';

@include font-face('<フォント名>', '＜フォントファイルまでのパス＞', <ウェイト>, <スタイル>, <タイプ>);

実際に使ってみると下記のように書くことができます。

style.scss

@import './mixin/fonts';

@include font-face('TeX Gyre Adventor', '../../fonts/texgyreadventor-regular', null, null, ttf);
@include font-face('TeX Gyre Adventor', '../../fonts/texgyreadventor-bold', bold, null, ttf);
@include font-face('Freestyle Script Std', '../../fonts/FreestyleScriptStd', null, null, ttf otf);

ウェイトとスタイルは何も指定がない場合nullを入れてあげましょう。フォントタイプは複数指定可能です。複数タイプ指定する場合には"ttf otf"のようにスペースを空けてつなげてあげてください。

4. CSSに変換してみろ

実際に正しい書き方になっているかどうか、CSSにコンバートして確かめてみます。ターミナル上からコマンドで、style.cssというファイルに変換してみます。

$ sass style.scss:style.css

style.cssを開いて中身を確認します。

style.css

@font-face {
  font-family: "TeX Gyre Adventor";
  src: url("../../fonts/texgyreadventor-regular") format("truetype"); }

@font-face {
  font-family: "TeX Gyre Adventor";
  font-weight: bold;
  src: url("../../fonts/texgyreadventor-bold") format("truetype"); }

@font-face {
  font-family: "Freestyle Script Std";
  src: url("../../fonts/FreestyleScriptStd") format("opentype"),
       url("../../fonts/FreestyleScriptStd") format("truetype"); }

はい、問題なく読み込まれていますね。あとは普通にスタイルシート内でfont-familyプロパティから使ってあげることができます。使ってみて何か不具合があれば、何でもコメントください。

参考サイト：SASS @font-face mixin