Google font not working with <Font/> tag. #2962

satyam-bhosale · 2026-02-16T13:18:50Z

satyam-bhosale
Feb 16, 2026

I'm new to react email, read the docs, when I use the "Roboto" and "Inter" font it worked with the react email, but when I used other fonts like "Poppins" and "Montserrat" it didn't work. My Code:

emails/layout/base-layout.tsx:

emails/email-verification.tsx:

Answered by Tilakmahajan

Feb 16, 2026

That makes sense 👍

At this point, since you've tested both:

• Direct WOFF2 from fonts.gstatic.com
• Google Fonts CSS API (fonts.googleapis.com)

and it still falls back in the React Email preview, then this is very likely a limitation of the preview/rendering environment itself rather than an issue in your implementation.

Fonts like Inter and Roboto sometimes appear to work because they are commonly available in many systems or preview environments.

For production email templates, using a strong fallback stack (like Helvetica, Arial, sans-serif) is generally the safest and most reliable approach across clients.

Glad you were able to narrow it down 💪

If this helped clarify things, feel free…

View full answer

Tilakmahajan · 2026-02-16T13:35:06Z

Tilakmahajan
Feb 16, 2026

Hi 👋

This is not a React Email issue — it's related to email client font support.

Most email clients (including Gmail and Outlook) do NOT support external web fonts loaded from Google Fonts (fonts.gstatic.com). They either:

Ignore the @font-face declaration
Strip remote font URLs
Fallback to system fonts

Fonts like Roboto and Inter sometimes appear to work because some clients have them preinstalled or treat them differently.

Montserrat and Poppins are not widely supported in email clients, so they will fall back to your fallbackFontFamily.

Unfortunately, custom Google Fonts generally do not work reliably in emails.

If you need consistent rendering across clients, you should:

Use system fonts (Arial, Helvetica, Verdana, sans-serif)
Or rely on safe fallback stacks
Avoid external WOFF/WOFF2 fonts in email templates

This is an email client limitation rather than a React Email bug 👍

4 replies

satyam-bhosale Feb 16, 2026
Author

Hey Tilak, thanks for the response, but I on email client it's expected but even on the preview except the "Inter" and "Roboto" it's not showing me preview. That's why opened this discussion.

Tilakmahajan Feb 16, 2026

Thanks for clarifying 👍

If it's not rendering even in the React Email preview, then this is likely related to how the component works internally.

A couple of things to check:

The React Email component currently only works reliably with Google Fonts that are supported via the Google Fonts CSS API (not direct WOFF/WOFF2 links).

Instead of:
url: "https://fonts.gstatic.com/..."

Try using:
webFont={{
url: "https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap",
format: "woff2"
}}
Make sure you're not mixing Tailwind font configuration with in a conflicting way. The preview renderer may ignore Tailwind's extended fontFamily unless the font is actually loaded via CSS.
Some fonts (like Inter and Roboto) may appear to work because they are already available in the preview environment or system fonts.

If possible, could you share a minimal reproducible example? That would help narrow down whether this is a preview limitation or a font loading issue.

Happy to dig deeper 🙂

satyam-bhosale Feb 16, 2026
Author

emails/layouts/base-layout.tsx :

import { Font, Head, Html, pixelBasedPreset, Tailwind } from '@react-email/components';
import { type ReactNode } from 'react';

type Props = {
    children: ReactNode
}

function BaseLayout({ children }: Props) {
    return <Html>
        <Head>
            <Font
                fontFamily="Montserrat"
                fallbackFontFamily="Helvetica"
                webFont={{
                    url: "https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap",
                    format: "woff2",
                }}
                fontWeight={400}
                fontStyle="normal"
            />
        </Head>
        <Tailwind
            config={{
                presets: [pixelBasedPreset],
                theme: {
                    extend: {
                        fontFamily: {
                            montserrat: ['Montserrat','Helvetica','sans-serif']
                        }
                    }
                }
            }}
        >
            {children}
        </Tailwind>
    </Html>
}

export default BaseLayout;

emails/emailverification.tsx :

import { Body, Button, Container, Heading, Img, Preview, Section, Text } from "@react-email/components";
import BaseLayout from "./layouts/base-layout.js";

function EmailVerification() {
    return (
        <BaseLayout>
            <Body>
                <Preview>Verify your email address</Preview>
                <Container className="mx-auto my-12.5 max-w-116.25 border border-solid border-[#ededed] rounded-xl">
                    <Section className="px-7">
                        <Heading as="h2" className="text-3xl py-0">
                            Verify your email address
                        </Heading>
                        <Text className="text-lg">
                            Thanks for signing up! To complete your registration and start using Filmato, please verify your email address by clicking the button below.
                        </Text>
                    </Section>
                    <Section className="px-8 pt-5 pb-10">
                        <Button href={'#'} className="bg-[#f7f7f7] text-sm px-5 py-1 cursor-pointer">
                            <p><strong className="text-black">Verify Email</strong></p>
                        </Button>
                    </Section>
                </Container>
            </Body>
        </BaseLayout>
    )
}

export default EmailVerification;

This is the code, I tried using the css instead of woff2 direct url, both didn't work, I tried sending the example emails and all of them uses the fallback fonts, so now trying to be happy with the Inter/Roboto and the falback fonts 😭👍

Tilakmahajan Feb 16, 2026

That makes sense 👍

At this point, since you've tested both:

• Direct WOFF2 from fonts.gstatic.com
• Google Fonts CSS API (fonts.googleapis.com)

and it still falls back in the React Email preview, then this is very likely a limitation of the preview/rendering environment itself rather than an issue in your implementation.

Fonts like Inter and Roboto sometimes appear to work because they are commonly available in many systems or preview environments.

For production email templates, using a strong fallback stack (like Helvetica, Arial, sans-serif) is generally the safest and most reliable approach across clients.

Glad you were able to narrow it down 💪

If this helped clarify things, feel free to mark it as the accepted answer so others running into the same confusion can find it easily.

Answer selected by satyam-bhosale

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Google font not working with <Font/> tag. #2962

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 4 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Google font not working with <Font/> tag. #2962

Uh oh!

Uh oh!

satyam-bhosale Feb 16, 2026

emails/layout/base-layout.tsx:

emails/email-verification.tsx:

Replies: 1 comment · 4 replies

Uh oh!

Tilakmahajan Feb 16, 2026

Uh oh!

Uh oh!

satyam-bhosale Feb 16, 2026 Author

Uh oh!

Tilakmahajan Feb 16, 2026

Uh oh!

Uh oh!

satyam-bhosale Feb 16, 2026 Author

Uh oh!

Tilakmahajan Feb 16, 2026

satyam-bhosale
Feb 16, 2026

Replies: 1 comment 4 replies

Tilakmahajan
Feb 16, 2026

satyam-bhosale Feb 16, 2026
Author

satyam-bhosale Feb 16, 2026
Author