#Custom font for TailwindCSS other than Inter using NextFont

4 messages · Page 1 of 1 (latest)

warm zephyr
#

I'm following along the beta nextjs 13 documentation in regards to using @buoyant thistle/font w/ tailwind but I'd like to use a google font other than Inter (Source Sans Pro), but it seems to require a weight parameter wheras Inter doesn't. Why is this the case and how can I fix it?

const { fontFamily } = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./app/**/*.{js,ts,jsx,tsx}", // Note the addition of the `app` directory.
        "./pages/**/*.{js,ts,jsx,tsx}",
        "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ["var(--font-source-sans-pro)", ...fontFamily.sans],
            },
        },
    },
    plugins: [],
};

import "styles/globals.css";
import { Source_Sans_Pro } from "@next/font/google";

const source_sans_pro = Source_Sans_Pro({
    variable: "--font-source-sans-pro",
});

export default function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <html lang='en' className={source_sans_pro.variable}>
            {/*
        <head /> will contain the components returned by the nearest parent
        head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
      */}
            <head />
            <body>{children}</body>
        </html>
    );
}
image.png image.png
high cradle
#

I put subsets: ["latin"] and it's working for me as far as I can tell

high cradle
#

Ah, no it's not

lean sun
#

I think you need:

<html lang="en" className={`${source_sans_pro.variable} font-sans`}>

for convention I would use camelcase vs under scores.