Fuwariで好きなフォントを使う

Fuwariのデフォルトフォント(Roboto)を自分の好きなフォントに変更する方法．

Fontsourceからフォントをインストール#

今回はIBM Plex Sans JPをインストールする．

1
pnpm install @fontsource/ibm-plex-sans-jp

`src/layouts/Layout.astro`を編集する#

2~4行目のimport @fontsource/roboto/をインストールしたフォントに置き換える．

1
---
2
import GlobalStyles from '@components/GlobalStyles.astro'
3
 import '@fontsource/roboto/400.css'
4
 import '@fontsource/roboto/500.css'
5
 import '@fontsource/roboto/700.css'
6
 import '@fontsource/ibm-plex-sans-jp/400.css'
7
 import '@fontsource/ibm-plex-sans-jp/500.css'
8
 import '@fontsource/ibm-plex-sans-jp/700.css'

`tailwind.config.mjs`を書き換える#

1
/** @type {import('tailwindcss').Config} */
2
const defaultTheme = require('tailwindcss/defaultTheme')
3
module.exports = {
4
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,mjs}'],
5
  darkMode: 'class', // allows toggling dark mode manually
6
  theme: {
7
    extend: {
8
      fontFamily: {
9
        sans: [
10
         'Roboto',
11
         'IBM Plex Sans JP',
12
          'sans-serif',
13
          ...defaultTheme.fontFamily.sans,
14
        ],
15
      },
16
    },
17
  },
18
  plugins: [require('@tailwindcss/typography')],
19
}

等幅フォントの変更#

コードブロックなどで表示される等幅フォントはsrc/components/misc/Markdown.astroを編集して変更する．

1
---
2
 import '@fontsource-variable/jetbrains-mono'
3
 import '@fontsource-variable/jetbrains-mono/wght-italic.css'
4
 import '@fontsource/ibm-plex-mono/300.css'
5
 import '@fontsource/ibm-plex-mono/300-italic.css'
6
...
7

8
    code
9
     font-family: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
10
     font-family: 'IBM Plex Sans', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace

Fontsourceからフォントをインストールするところとtailwind.config.mjsを書き換えるところは同じ．

参考#

https://docs.astro.build/ja/guides/fonts/

このサイトのLayout.astro

Fontsourceからフォントをインストール#

src/layouts/Layout.astroを編集する#

tailwind.config.mjsを書き換える#

等幅フォントの変更#

参考#

`src/layouts/Layout.astro`を編集する#

`tailwind.config.mjs`を書き換える#