Edited at

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

More than 1 year has passed since last update.

「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;
}
}


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


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