1. kobori_akira

    No comment

    kobori_akira
Changes in body
Source | HTML | Preview
@@ -1,136 +1,136 @@
## はじめに
gatsby-starter-blogをテンプレートに選ぶと、フォント系の情報は`src/utils/Typography.js`に保存されます。
```Typography.js
import Typography from "typography"
import Wordpress2016 from "typography-theme-wordpress-2016"
Wordpress2016.overrideThemeStyles = () => {
return {
"a.gatsby-resp-image-link": {
boxShadow: `none`,
},
}
}
delete Wordpress2016.googleFonts
const typography = new Typography(Wordpress2016)
// Hot reload typography in development.
if (process.env.NODE_ENV !== `production`) {
typography.injectStyles()
}
export default typography
export const rhythm = typography.rhythm
export const scale = typography.scale
```
これを改修して、Google Fontsを使えるようにしてみましょう。
## 1. モジュールのインストール
必要なモジュールをインストールします。
```bash
yarn add typography-theme-github
```
## 2. テーマを追加する
Wordpress2016を削除して、追加したモジュールを利用するようにします。
```Typography.js
import Typography from "typography"
import theme from "typography-theme-github"
const typography = new Typography(theme)
// Hot reload typography in development.
if (process.env.NODE_ENV !== `production`) {
typography.injectStyles()
}
export default typography
export const rhythm = typography.rhythm
export const scale = typography.scale
```
## 3. テーマにNoto Sans JPを追加する
テーマがGoogle FontsのNoto Sans JPを扱えるように、`theme.googleFonts`を指定します。
```Typography.js
// importは省略
theme.googleFonts = [
{
name: "Noto+Sans+JP",
styles: ["400"],
}
]
const typography = new Typography(theme)
// 以下省略
```
このようにすることで、ブログでNoto Sans JPが使えるようになります。
## 4. ヘッダー、ボディそれぞれにNoto Sans JPを指定する
最後に追加したNoto Sans JPを適用しましょう。
```Typography.js
// importは省略
theme.googleFonts = [
{
name: "Noto+Sans+JP",
styles: ["400"],
}
]
theme.headerFontFamily = ["Noto Sans JP"]
theme.bodyFontFamily = ["Noto Sans JP"]
const typography = new Typography(theme)
// 以下省略
```
これでフォントを指定することができました。
## 備考
Typography.jsをもう少しちゃんと知ろうとする場合は、[Typography.jsによるフォントスタイルの設定まとめ](https://qiita.com/MikihiroSaito/items/1ab9d5eeea66a163648b#typography)がよいかと思います。
たとえばheaderとbodyそれぞれに異なるフォントを指定することも可能です。
```Typography.js
import Typography from "typography"
import theme from "typography-theme-github"
-theme.headerFontFamily = ["M PLUS 1P", "Roboto", "serif"]
-theme.bodyFontFamily = ["hannari", "Roboto", "serif"]
+theme.headerFontFamily = ["M PLUS 1P"]
+theme.bodyFontFamily = ["hannari"]
theme.googleFonts = [
{
name: "M+PLUS+1p",
styles: ["400"],
},
{ name: "hannari", styles: ["400"] },
]
const typography = new Typography(theme)
// Hot reload typography in development.
if (process.env.NODE_ENV !== `production`) {
typography.injectStyles()
}
export default typography
export const rhythm = typography.rhythm
export const scale = typography.scale
```
Google Fontsの種類については、日本語であれば[Google Fonts + 日本語](https://googlefonts.github.io/japanese/)で確認できます。