diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index 1e271cf24..7bee6c352 100644 --- a/app/[locale]/layout.tsx +++ b/app/[locale]/layout.tsx @@ -1,4 +1,4 @@ -import { Noto_Serif_JP } from 'next/font/google'; +import { Lato, Noto_Serif_JP } from 'next/font/google'; import localFont from 'next/font/local'; import { ReactNode, Suspense } from 'react'; @@ -55,6 +55,13 @@ const alpina = localFont({ variable: '--font-alpina' }); +const lato = Lato({ + subsets: ['latin'], + display: 'swap', + weight: ['300'], + variable: '--font-lato' +}); + const noto = Noto_Serif_JP({ subsets: ['latin'], display: 'swap', @@ -81,7 +88,10 @@ export default async function RootLayout({ } return ( - + diff --git a/tailwind.config.js b/tailwind.config.js index dd00f7c64..b6458a31d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,6 @@ const plugin = require('tailwindcss/plugin'); const colors = require('tailwindcss/colors'); +const defaultTheme = require('tailwindcss/defaultTheme'); /** @type {import('tailwindcss').Config} */ module.exports = { @@ -11,7 +12,8 @@ module.exports = { dark: '#212720' }, fontFamily: { - serif: ['var(--font-alpina)', 'serif'], + sans: ['var(--font-lato)', ...defaultTheme.fontFamily.sans], + serif: ['var(--font-alpina)', ...defaultTheme.fontFamily.serif], title: ['var(--font-cinzel)', 'serif'], japan: ['var(--font-noto)', 'serif'] },