大変嬉しい反響を頂きましたので、2020年まで使えるfont-familyのベストプラクティスをBootstrap4に組み込むのが面倒くさいあなたに向けて作りました。
おまけでMaterial Design Liteも用意しました。
ゴシック体のみのコードとなります。
明朝体はBootstrapの初期値では指定されていないので、明朝体は記述しません。
等幅フォントはお好みで調整してください。
Bootstrap3は私も面倒くさいので、作る予定はありません。
Bootstrapの日本語化
Bootstrap4に「2020年まで使えるfont-familyのベストプラクティス」で作ったfont-familyを適用させます。
製作時のバージョンが [ 4.0.0-alpha.4 ] になります。適時読み替えてください。
動作確認済みバージョン
4.0.0-alpha.4
4.0.0-alpha.5
Bootstrap4のダウンロードまたはCDNの利用
Bootstrapからファイルをダウンロードするか、CDNを利用します。
ダウンロードした場合はscssを編集します。
CDNを利用する場合は、編集できないので、自分でファイルを用意します。
[ SCSS ] SCSSをコンパイルする場合
[ bootstrap-4.0.0-alpha.4/scss/_custom.scss ]がBootstrapの変数を編集するときに利用するファイルになります。
コメントアウトには
変数の上書きするなら、直接編集しないで、ココに書きなさいよねっ！
私のコードと混ざっちゃうじゃない！
的なことが書いてあります。
なのでBootstrapを編集する場合_variables.scssを直接編集せず、_custom.scssを利用しましょう。
[ SCSS ] 記述するコード
_custom.scss
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
@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;
}
// IE hack
@media all and (-ms-high-contrast: none) {
body,
tooltip,
popover {
font-family: Verdana, Meiryo, sans-serif;
}
}
以上です。
[ SCSS ] コンパイル
[ bootstrap-4.0.0-alpha.4/scss/bootstrap.scss ] または
[ bootstrap-4.0.0-alpha.4/scss/bootstrap-flex.scss ] をコンパイルします。
前者がfloat、
後者がFlexboxを用いたものになります。
コンパイルが出来ていれば [ bootstrap-4.0.0-alpha.4/css ] に同名のファイルが出力されているはずです。
以上にて [ SCSS ] 編の終了になります。
[ CDN ] CDNを利用する場合
CDNを利用する場合、当たり前ですがファイルの編集ができません。
なので、Bootstrapとは別のCSSで上書きするだけです。
今回 [ css/style.css ] とします。
バージョンの変更によりコードが変わる可能性がSCSSより大きいです。
当記事ではバージョン毎に変更したりはしません。ご了承ください。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
[ CDN ] Bootstrapを上書きする
下記コードを記述します。
出来れば最上部が望ましいです。
css/style.css
@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;
}
body,
tooltip,
popover {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}
@media all and (-ms-high-contrast: none) {
body,
tooltip,
popover {
font-family: Verdana, Meiryo, sans-serif;
}
}
コピペして終了。
Material Design Lite
需要が殆どないと思うのでおまけです。
OOCSSのBootstrapと違い、MindBEMdingであるMDLのほうが性質上font-familyが指定されているクラスが多いです。
style.css
@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;
}
html, body,
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
h1, h2, h3, h4, h5, h6,
blockquote,
.mdl-typography--display-4,
.mdl-typography--display-4-color-contrast,
.mdl-typography--display-3,
.mdl-typography--display-3-color-contrast,
.mdl-typography--display-2,
.mdl-typography--display-2-color-contrast,
.mdl-typography--display-1,
.mdl-typography--display-1-color-contrast,
.mdl-typography--headline,
.mdl-typography--headline-color-contrast,
.mdl-typography--title,
.mdl-typography--title-color-contrast,
.mdl-typography--subhead,
.mdl-typography--subhead-color-contrast,
.mdl-typography--body-2-force-preferred-font,
.mdl-typography--body-2-force-preferred-font-color-contrast,
.mdl-typography--body-1-force-preferred-font,
.mdl-typography--body-1-force-preferred-font-color-contrast,
.mdl-typography--caption-force-preferred-font,
.mdl-typography--caption-force-preferred-font-color-contrast,
.mdl-typography--menu,
.mdl-typography--menu-color-contrast,
.mdl-typography--button,
.mdl-typography--button-color-contrast,
.mdl-badge .mdl-badge[data-badge]:after,
.mdl-button,
.mdl-chip,
.mdl-list__item,
.mdl-layout__title,
.mdl-layout-title,
.mdl-layout__drawer-button,
.mdl-snackbar,
.mdl-snackbar .mdl-snackbar__action,
.mdl-textfield__input {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}
@media all and (-ms-high-contrast: none) {
html, body,
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
h1, h2, h3, h4, h5, h6,
blockquote,
.mdl-typography--display-4,
.mdl-typography--display-4-color-contrast,
.mdl-typography--display-3,
.mdl-typography--display-3-color-contrast,
.mdl-typography--display-2,
.mdl-typography--display-2-color-contrast,
.mdl-typography--display-1,
.mdl-typography--display-1-color-contrast,
.mdl-typography--headline,
.mdl-typography--headline-color-contrast,
.mdl-typography--title,
.mdl-typography--title-color-contrast,
.mdl-typography--subhead,
.mdl-typography--subhead-color-contrast,
.mdl-typography--body-2-force-preferred-font,
.mdl-typography--body-2-force-preferred-font-color-contrast,
.mdl-typography--body-1-force-preferred-font,
.mdl-typography--body-1-force-preferred-font-color-contrast,
.mdl-typography--caption-force-preferred-font,
.mdl-typography--caption-force-preferred-font-color-contrast,
.mdl-typography--menu,
.mdl-typography--menu-color-contrast,
.mdl-typography--button,
.mdl-typography--button-color-contrast,
.mdl-badge .mdl-badge[data-badge]:after,
.mdl-button,
.mdl-chip,
.mdl-list__item,
.mdl-layout__title,
.mdl-layout-title,
.mdl-layout__drawer-button,
.mdl-snackbar,
.mdl-snackbar .mdl-snackbar__action,
.mdl-textfield__input {
font-family: Verdana, Meiryo, sans-serif;
}
}
@media all and (-ms-high-contrast: none) {
body {
font-family: Verdana, Meiryo, sans-serif;
}
h1, h1 small, h2, h2 small, h3, h3 small, h4, h4 small, h5, h5 small, h6, h6 small,
.mdl-button {
font-family: Verdana, Meiryo, sans-serif;
}
}
他のフレームワークを日本語に置き換えるとき
今回私が行った方法は、font-familyを検索して、目視でゴシック体か否かを判断してクラス名を抜き出しただけです。
そこに指定したいfont-familyを適用するだけの簡単なお仕事。（でも面倒くさい）
ね、簡単でしょ？
特に難しいことはしていないので、大した確認を行っておりません。ご了承ください。
CSSに名前をつけるなら[ Chika ] とでもしましょうか。