Font is not working with Next 14 #1487

dkrasnov-aurorasolar · 2024-05-31T21:46:35Z

dkrasnov-aurorasolar
May 31, 2024

Hello!

I'm using react-email with Postmark integration inside Next 14 app.

    "@react-email/components": "0.0.18",
    "@react-email/render": "0.0.14",

I'm trying to set up a custom web font

export const EmailTemplate = ({ loginCode }: EmailTemplateProps) => (
  <Html>
    <Head>
      <Font
        fallbackFontFamily="comic sans ms"
        fontFamily="Merriweather"
        fontStyle="normal"
        fontWeight={400}
        webFont={{
          format: 'woff2',
          url: 'https://fonts.gstatic.com/s/merriweather/v30/u-440qyriQwlOrhSvowK_l5-ciZMdeX3rsHo.woff2',
        }}
      />
    </Head>
    <Preview>Verify your email</Preview>
    <Body style={main}>
      <Container style={container}>
        <Img alt="Logo" src={`${baseUrl}/logo.png`} />
        <Heading>Your access code</Heading>
        <code>{code}</code>
      </Container>
    </Body>
  </Html>
);

and send it with

    const emailHtml = render(EmailTemplate({ loginCode: code }));

    await postmarkClient.sendEmail({
      From: '[email protected]',
      HtmlBody: emailHtml,
      Subject: 'Verify your email',
      To: email,
    });

the email font shows up as comic sans, not Merriweather though from the inspector I can see that the font-face is set correctly

font-family: 'Merriweather', comic sans ms;

thanks!

kevinL5 · 2025-01-28T14:16:06Z

kevinL5
Jan 28, 2025

Hi! Not all clients support web fonts. For support check: https://www.caniemail.com/features/css-at-font-face/

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Font is not working with Next 14 #1487

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Font is not working with Next 14 #1487

Uh oh!

dkrasnov-aurorasolar May 31, 2024

Replies: 1 comment

Uh oh!

kevinL5 Jan 28, 2025

dkrasnov-aurorasolar
May 31, 2024

kevinL5
Jan 28, 2025