add font-notion

gabrielmfern · gabrielmfern · commit 0a76254c9dbe · 2025-10-01T13:22:35.000-03:00
diff --git a/apps/demo/emails/magic-links/notion-magic-link.tsx b/apps/demo/emails/magic-links/notion-magic-link.tsx
@@ -26,31 +26,29 @@ export const NotionMagicLinkEmail = ({
   <Html>
     <Head />
     <Tailwind config={tailwindConfig}>
-      <Body className="bg-white">
+      <Body className="bg-white font-notion">
         <Preview>Log in with this magic link</Preview>
         <Container className="px-3 mx-auto">
-          <Heading className="text-[#333] font-sans text-2xl my-10 mx-0 p-0">
+          <Heading className="text-[#333] text-2xl my-10 mx-0 p-0">
             Login
           </Heading>
           <Link
             href="https://notion.so"
             target="_blank"
-            className="text-[#2754C5] font-sans text-sm underline mb-4 block"
+            className="text-[#2754C5] text-sm underline mb-4 block"
           >
             Click here to log in with this magic link
           </Link>
-          <Text className="text-[#333] font-sans text-sm my-6 mb-3.5">
+          <Text className="text-[#333] text-sm my-6 mb-3.5">
             Or, copy and paste this temporary login code:
           </Text>
-          <code className="inline-block py-4 px-[4.5%] w-9/10">
+          <code className="inline-block py-4 px-[4.5%] w-9/10 bg-[#f4f4f4] rounded-md border border-solid border-[#eee] text-[#333]">
             {loginCode}
           </code>
-          <Text className="text-[#ababab] font-sans text-sm mt-3.5 mb-4">
+          <Text className="text-[#ababab] text-sm mt-3.5 mb-4">
             If you didn&apos;t try to login, you can safely ignore this email.
           </Text>
-          <Text
-            className="text-[#ababab] font-sans text-sm mt-3.5 mb-9.5"
-          >
+          <Text className="text-[#ababab] text-sm mt-3.5 mb-9.5">
             Hint: You can set a permanent password in Settings & members → My
             account.
           </Text>
@@ -60,11 +58,11 @@ export const NotionMagicLinkEmail = ({
             height="32"
             alt="Notion's Logo"
           />
-          <Text className="text-[#898989] font-sans text-xs mt-3 mb-6">
+          <Text className="text-[#898989] text-xs mt-3 mb-6">
             <Link
               href="https://notion.so"
               target="_blank"
-              className="text-[#898989] font-sans text-sm underline"
+              className="text-[#898989] text-sm underline"
             >
               Notion.so
             </Link>
@@ -83,4 +81,3 @@ NotionMagicLinkEmail.PreviewProps = {
 } as NotionMagicLinkEmailProps;
 
 export default NotionMagicLinkEmail;
-
diff --git a/apps/demo/emails/tailwind.config.ts b/apps/demo/emails/tailwind.config.ts
@@ -2,4 +2,10 @@ import { pixelBasedPreset, type TailwindConfig } from '@react-email/components';
 
 export default {
   presets: [pixelBasedPreset],
+  theme: {
+    fontFamily: {
+      notion:
+        "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+    },
+  },
 } satisfies TailwindConfig;
