2019-01-23に投稿

GatsbyJSでフォントを変更する

GatsbyJSでフォントをあてる

ブログの見た目と読みやすさを追求するならやはりフォントにも多少はこだわりたい。
GatsbyJSには、Typography.jsを用いたやり方が公式チュートリアルには記載されている。(本当はtypefaceでやるやり方が最近のGatsby流なのですが、上手く動かなかったのでこちらで実装。)

GatsbyJSに Typography pluginを入れる

npm install gatsby-plugin-typography react-typography typography --save

gatsby-config.jsをセッティング

gatsby-config.jsを以下の様にセッティングする

module.exports = {
siteMetadata: {
    title: 'Gatsby Default Starter',
},
plugins: [
 {
  resolve: `gatsby-plugin-typography`,
  options: {
    pathToConfigModule: `src/utils/typography`,
  }
 }
],
}

typography.jsを作成する

src/utils/フォルダを作成し、typography.jsをそのフォルダに入れる。

import Typography from "typography"

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.666,
  headerFontFamily: [
    "Avenir Next",
    "Helvetica Neue",
    "Segoe UI",
    "Helvetica",
    "Arial",
    "sans-serif",
  ],
  bodyFontFamily: ["Georgia", "serif"],
})

export default typography

layouts.cssを全部消す。

layouts.cssには色々なCSSがまだ入っているので全部消してみる。
すると以下の様になる。
015-1.jpg
これがインストールとセッティングが終わるとこうなる。
015-2.jpg
これでフォント問題も解決しました。

Originally published at www.corylog.com

view_list [連載] ブロガー向けGatsby講座
第12回 GatsbyJSでMarkdownの記事を表示させよう
第13回 GatsbyJSでfontawesomeを使う
第14回 GatsbyJSでフォントを変更する
第15回 GatsbyJSでMarkdownで画像を表示する
第16回 GatsbyJSでiframeタグを使う

aocory

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント