SvelteKit + Tailwind CSSのカスタムフォントを変更する。

ymgn

この対応方法が簡単だったのでメモ。

ymgn

このフォントをダウンロードし、static/fonts/NotoSansJP-VariableFont_wght.ttfという風に配置した。

ymgn

app.postcssに、次の記述を追加。

@layer base {
  @font-face {
    font-family: 'Noto Sans JP';
    src: local('Noto Sans JP'), url('/fonts/NotoSansJP-VariableFont_wght.ttf');
    font-display: swap;
  }
}

ymgn

tailwind.config.jsのtheme > extendにNoto Sans JPの記述を追加。
この追加により、class="font-noto"というスタイルが有効になる。

/** @type {import('tailwindcss').Config} */
const config = {
  theme: {
    extend: {
      fontFamily: {
        noto: ["Noto Sans JP"],
        sans: [...fontFamily.sans]
      }
    }
  },
};

ymgn

+layout.svelteを<div class="font-noto">で囲む。

<div class="font-noto">
  <Header />
  <ScrollToTop />
  <div class={cn("container px-4 mx-auto my-12 space-y-12 md:max-w-3xl")}>
    <main>
      <slot />
    </main>
    <Footer />
  </div>
</div>

ymgn

Done.

このスクラップは2023/10/11にクローズされました