AstroとTailwindCSSで作ったサイトのフォントをNoto Sans JPにする方法
/ 1 min read
Table of Contents
はじめに
AstroとTailwindCSSで作ったサイトのフォントをNoto Sans JPにする方法を紹介します。
方法
とはいえ、Fontsourceを使っているので、簡単です。
まずは、公式サイトのGetting Startedを参考に、
Noto Sans JPをインストールします。
$ npm install @fontsource-variable/noto-sans-jp
次に、コンポーネントでインポートします。global.css
と一緒に取り込んでいます。
こんな感じ。
---import "../styles/global.css";import '@fontsource-variable/noto-sans-jp';---
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="your keywords" content="Add ypour keywords here" />
最後に、global.css
でフォントを追加します。
@tailwind base;@tailwind components;@tailwind utilities;
:root { font-family: 'Noto Sans JP Variable', sans-serif;}@supports (font-variation-settings: normal) { :root { font-family: 'Noto Sans JP Variable', sans-serif; }}