Next.js Discord

Discord Forum

How to import Reddit Sans from next/font/google?

Unanswered
Silver Marten posted this in #help-forum
Open in Discord
Silver MartenOP
I'm trying to use Reddit Sans and Reddit Mono, two new fonts on Google:
- Reddit Sans: https://fonts.google.com/specimen/Reddit+Sans
- Reddit Mono: https://fonts.google.com/specimen/Reddit+Mono

I'm able to import Reddit Mono from next/font/google, but I don't see Reddit Sans: 

import { Reddit_Mono } from 'next/font/google';

const redditMono = Reddit_Mono({
  subsets: ['latin'],
  variable: '--font-reddit-mono',
});


How can I import Reddit Sans? Is there a delay between when new fonts are available on Google and when they're available on next/font/google?

I'm using Tailwind CSS with Next.js as described here: https://nextjs.org/docs/app/building-your-application/optimizing/fonts#with-tailwind-css

4 Replies

or 15rc
Silver MartenOP
OK, thanks. Canary seems risky. I got Reddit Sans to work using html import instead.

Import:
// layout.tsx
        <link rel="alternate" type="application/rss+xml" href="/feed.xml" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin="anonymous"
        />
        <link
          href="https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap"
          rel="stylesheet"
        />


Config:
// tailwind.config.ts
        mono: [
          'var(--font-reddit-mono)',
          ...defaultTheme.fontFamily.mono,
        ],
        sans: [
          'Reddit Sans',
          ...defaultTheme.fontFamily.sans,
        ],


Usage:
// layout.tsx
<body
        className={`font-sans ${redditMono.variable}`}
      >