CODEWITHSUNDEEP
reactjsfontsmobile-safarigoogle-fontsnext.js14
Ricardo Nazario
Ricardo Nazario

Reputation: 13

NextJS 14 next/font/google fonts not working on Safari iOS

I'm attempting to use Google Fonts on my NextJS project, and it all works fine on Chrome, Firefox, and Safari Mac. But on Safari iOS, it's defaulting to Times New Roman.

This is the code I have in prod:

// layout.tsx

import { Jomolhari, Josefin_Slab, Josefin_Sans } from "next/font/google";

const jomolhari = Jomolhari({
  weight: "400",
  subsets: ["latin"],
  variable: "--font-jomolhari",
  display: "swap",
});

const josefinSans = Josefin_Sans({
  subsets: ["latin"],
  variable: "--font-josefin-sans",
  display: "swap",
});

const josefinSlab = Josefin_Slab({
  subsets: ["latin"],

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html
      className={`${jomolhari.variable} ${josefinSans.variable} ${josefinSlab.variable}`}
      lang="en"
    >
      <body className={josefinSlab.className}>
        {children}
      </body>
    </html>
    );
  }

});

I've tried alternate solutions such as downloading the fonts and using localFont(). Also using @font-face on global.css. Or even getting the fonts remotely via url on global.css.

I realize Safari has made it harder to use fonts, but there must be a way, I'm sure others have solved this problem.

Thanks in advance for any help. I'll continue trying to find solutions and if I do I'll update this post.

Upvotes: 1

Views: 2232

Answers (1)

jonathangiardino
jonathangiardino

Reputation: 1

You need to add:

  • The fallback in the layout classname string

    className={`${inter.variable} font-sans ${serif.variable} font-serif ${mono.variable} font-mono

  • The variables in the tailwind config file in the extended fontFamily property.

    fontFamily: { sans: ["var(--inter)"], serif: ["var(--instrument)"], mono: ["var(--roboto-mono)"], }

This video by Lee from Vercel explains it, follow the video and it will work, I had the same issue!

https://www.youtube.com/watch?v=L8_98i_bMMA

Upvotes: -1

Related Questions