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

5 messages · Page 1 of 1 (latest)

scenic hinge
#

I'm trying to use Reddit Sans and Reddit Mono, two new fonts on Google:

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

Google Fonts
Reddit Sans - Google Fonts

Reddit Sans is a humanist sans-serif designed for Reddit. Reddit Sans is complemented by Reddit Sans Condensed and Reddit Mono. To contribute to this project, s

Google Fonts
Reddit Mono - Google Fonts

Reddit Mono is a humanist sans-serif designed for Reddit. Reddit Mono is complemented by Reddit Sans and Reddit Sans Condensed. To contribute to this project, s

Optimizing: Fonts | Next.js

Optimize your application's web fonts with the built-in next/font loaders.

final deltaBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

rare horizon
#

or 15rc

scenic hinge
#

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}`}
      >