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

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

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

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

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

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

---
import GlobalStyles from '@components/GlobalStyles.astro'
- import '@fontsource/roboto/400.css'
- import '@fontsource/roboto/500.css'
- import '@fontsource/roboto/700.css'
+ import '@fontsource/ibm-plex-sans-jp/400.css'
+ import '@fontsource/ibm-plex-sans-jp/500.css'
+ import '@fontsource/ibm-plex-sans-jp/700.css'

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

/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,mjs}'],
  darkMode: 'class', // allows toggling dark mode manually
  theme: {
    extend: {
      fontFamily: {
        sans: [
-         'Roboto',
+         'IBM Plex Sans JP',
          'sans-serif',
          ...defaultTheme.fontFamily.sans,
        ],
      },
    },
  },
  plugins: [require('@tailwindcss/typography')],
}

等幅フォントの​変更#

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

---
- import '@fontsource-variable/jetbrains-mono'
- import '@fontsource-variable/jetbrains-mono/wght-italic.css'
+ import '@fontsource/ibm-plex-mono/300.css'
+ import '@fontsource/ibm-plex-mono/300-italic.css'
...

    code
-     font-family: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
+     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