📁
TailwindCSSで外部フォントをインポートする
概要
TailwindCSSで外部フォントをインポートする方法について解説します。
このGoogle Fontsを例に解説します。
フォントのインポート
CSSのファイルにインポートします。
@import url('https://fonts.googleapis.com/css2family=Raleway:wght@100&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
tailwind.config.jsに記述する
読み込んだフォントをtailwind.config.jsに記述します。
module.exports = {
theme: {
fontFamily: {
Raleway: ['Raleway', 'sans-serif'],
}
}
}
<h1 class="font-Raleway">Hello World</h1>
完成
外部フォントをインポートすることができました。
参考
Discussion