みずラテ

牛乳と水を2対1で。

【Rails】BulmaでWebフォントを使ってみる

今回は、RailsにBulmaを適用した上で、Webフォントを使ってフォントを変えてみました。

導入手順

まず、Bulmaをすでにインストールしている人は、custom.scssあたりに以下のインポート文がすでに書かれていると思います。

@import "bulma";

フォントを変えるには上記一文の上に処理を記載する必要があります。
記載内容はシンプルに以下です。

ちなみに今回はGoogle FontsからNoto Sans Japaneseを拝借しました。


googlefonts.github.io


// Typography
@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');
$family-serif: 'Noto Sans Japanese', sans-serif;
$family-primary: $family-serif;

@import "bulma";

1行目でWebフォントの読み込み、2行目でフォントの設定をして、3行目でフォント設定をBulmaのprimaryフォントに設定しているだけです。
最後にBulma本体のimportをしてoverrideさせます。


以上です。