From bc777f57a6f28e1209c608a117ff1ce663c2270c Mon Sep 17 00:00:00 2001 From: Sol Irvine Date: Sat, 19 Aug 2023 16:19:42 +0900 Subject: [PATCH] wip: Add lato font --- app/[locale]/layout.tsx | 14 ++++++++++++-- tailwind.config.js | 4 +++- 2 files changed, 15 insertions(+), 3 deletions(-) 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'] },