bootstrap4をソースからSCSSコンパイルして日本語フォント適用

始めに

このページは完全なメモ。とりあえずやりたかったことはbootstrap4のデフォルトを日本語のページに適用したときにいろいろ調節したいところがあったのでやった。個人的ベストだが決してタイポグラフィの専門家が書いているものでは無いことを断っておく。

結論から

以下の_custom.scssをbootstrap.scssの一番最初で@import "custom";する。コンパイルして既存のbootstrap.min.css等を置き換える。以上。

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;

$font-family-monospace: SourceHanCodeJP-Regular, "Ricty Diminished", "fontSourceCodeVariable-Roman", "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

$line-height-base: 1.65;

$font-size-base:              1rem !default; // Assumes the browser default, 
$h1-font-size:                $font-size-base * 1.7 !default;
$h2-font-size:                $font-size-base * 1.58 !default;
$h3-font-size:                $font-size-base * 1.46 !default;
$h4-font-size:                $font-size-base * 1.34 !default;
$h5-font-size:                $font-size-base * 1.22 !default;
$h6-font-size:                $font-size-base * 1.1 !default;

$headings-font-weight: 700;

body {
  letter-spacing: .04em;
  text-align: justify;
}

code {
  letter-spacing: -.02em;
}

@font-face {
  font-family: "SourceHanCodeJP-Regular";
  src: local("SourceHanCodeJP-Regular");
}
@font-face {
  font-family: "Ricty Diminished";
  src: local("Ricty Diminished");
}
@font-face {
  font-family: "fontSourceCodeVariable-Roman";
  src: local("SourceCodeVariable-Roman");
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}

@media all and (-ms-high-contrast: none) {
  body,
  tooltip,
  popover {
    font-family: Verdana, Meiryo, sans-serif;
  }
}

やっていること

\$font-family-sans-serif変数を使いたいフォントで上書き。これは参考ページを大変参考にさせていただいた。もっとぐちゃぐちゃたくさん書いたものもあったがこれで良さげ。
\$font-family-monospaceをソースコードの表示などに使いたいフォントで上書き。こちらはよくわからなかったので_variables.scssのデフォルトをコピーしてきてその前にローカルのエディタなどで使っているフォントを指定。少なくとも自分のPCからの見栄えは良くなる。
$line-height-baseで行間を調整。1.65にしているが0.01単位とか正直知覚可能な範囲超えてるでしょ。何でも可。
見出しのフォントサイズがデフォルトだとバカでかいのでいい感じの1次関数で順番に大きくなるように設定。ウェイトを700にしてh6でも本文と見分けがつくようにした。
水平方向の文字の配置を調節。ソースコードなどのところは引き締まった感じを出すために少し狭くした。横長のコードとかを表示したときに全体が見えて便利。

詳しいやり方

https://getbootstrap.com/ からソースコードをダウンロードしてきて展開する。SCSSは使えること前提とする。RubyいれてSassコンパイラ入れたら確かできる。でもRubyにMSYSがついてくるのが邪魔なので何とかしたい。同じソフトウェアを共用しないあたりWindowsはまんじ。何個MSYS入れさせるねん。

scss以下に上記の_custom.scssを保存、bootstrap.scssを開いて

/*!
 * Bootstrap v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@import "custom"; /* 追加 */
@import "functions";
@import "variables";
/* 以下略 */

というように@import "custom";をこの位置に追加する。

scss -style compressed boostrap.scss bootstrap.min.css

とコマンド打てばbootstrap.min.cssが完成。

デモンストレーション

このページ。気が代わったり時期によっては違うかもね。

参考ページ

大変参考にさせていただいた。

Bootstrap4用游ゴシックfont-family https://qiita.com/RinoTsuka/items/aa1ab94c10542706fdc4