Fontsource

Webフォントを簡単に追加できるライブラリ

使用するフォントをnpmモジュールとして追加する

導入手順は公式ドキュメントを見れば分かる

Astroでの設定例

$ pnpm install @fontsource/source-code-pro @fontsource/m-plus-1p

code:src/layout.astro

---

import "@fontsource/source-code-pro"

import "@fontsource/m-plus-1p"

---

<html>

...

<style>

body { font-family: "M PLUS 1p", sans-serif; }

pre, code { font-family: "Source Code Pro", monospace; }

</style>

<html>

TailwindCSSでの設定例

base.cssでWebフォントをimportする

tailwind.config.cjsでWebフォントを追加する

外側の引用符は取り除かれるため二重の引用符が必要

code:base.css

@import '@fontsource/m-plus-1p';

@tailwind base;

@tailwind components;

@tailwind utilities;

code:tailwind.config.cjs

theme: {

extend: {

fontFamily: {

// 内側の引用符がないと適用されないため注意すること

public.icon