Search by

    gatsbyでgooglefontを使う方法

    gatsbyでgooglefontを使う方法

    前提


    gatsby-starter-netlify-cmsを使ってベースのサイトを構築

    Noto Sans JPを使う場合


    your-project\src\components\all.sassで$family-sans-serifをオーバーライドします。

    all.sass
    //googlefontのサイトでインポート先を探索してimport
    @import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');
    
    // Config vars
    
    // 日本語の表示にGoogleFont Noto Sans JP を使う。
    $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", 'Noto Sans JP', "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif 
    • 上記コードは@import "~bulma/sass/utilities/initial-variables"@import "~bulma"の間に記載する。
    • bulmaが指定する日本語フォントよりも前に、'Noto Sans JP'を指定することで、フォントが適用される。
    • 同様の方法で種々のフォントを導入することができる。

    Bulmaの変数をオーバーライドするお作法


    フォント以外にも、色んな変数をオーバーライドできる。scssについてはよく知らないが便利な仕組みだと思いました。 変数を変更することで、cssを直接編集するよりも、安全かつ楽にカスタマイズできそうです。 (bootstrapはその辺りの仕組みを用意しているのかしら。)

    ##### 具体的な方法はこちらの公式ページを参照

    1. Bulmaをインストールまたはダウンロード
    2. sassが動く仕組み整える。npmでもできる。
    3. 自前のsass、or scssファイルを作る。(その中で、@import "~bulma/sass/utilities/initial-variables"@import "~bulma"して、オーバーライドする変数はその間に書く。)

    [備考]gatsbyではCSSフレームワークは一つに絞ったほうがいい?


    cssを適用させる方法はいくつかあるけど、複数の方法を組み合わせると競合して上手く動かない。 例えば、Typography.jsbulmaを組合せて使うのは難しいのでは? どれか一つのフレームワークで基本的なところを整理すると楽かなと思いました。

    私はこうしてハマった...

    gatsby-starter-netlify-cmsを利用してサイトのベースを作る

    その後、チュートリアルでやった通りにgatsby-plugin-typographyを導入すると…

    typographyが動かなくて、ウーンemoji-snail

    gatsby-starter-netlify-cmsでは最初にbulmaが使われているので、競合するっぽいと気が付きましたemoji-bulb

    Tags