diff --git a/src/core/ui/render.tsx b/src/core/ui/render.tsx
index c2cae26cf..10afb44ef 100644
--- a/src/core/ui/render.tsx
+++ b/src/core/ui/render.tsx
@@ -1,19 +1,32 @@
 import { Resvg } from '@resvg/resvg-js';
-import { readFileSync } from 'fs';
+import { readFile } from 'fs';
 import { ReactNode } from 'react';
 import satori from 'satori';
 
-const robotoFlex = readFileSync('src/assets/fonts/Roboto.ttf');
-const robotoFlexBold = readFileSync('src/assets/fonts/Roboto-Bold.ttf');
-const robotoFlexBlack = readFileSync('src/assets/fonts/Roboto-Black.ttf');
+const FONT_NAME = 'Roboto';
+const FONT_FILES = ['Roboto', 'Roboto-Bold', 'Roboto-Black'];
+
+console.log('Importing fonts...');
+const [robotoFlex, robotoFlexBold, robotoFlexBlack] = await Promise.all(
+  FONT_FILES.map(
+    (file) =>
+      new Promise<Buffer>((resolve, reject) => {
+        readFile(`src/assets/fonts/${file}.ttf`, (error, data) => {
+          if (error) reject(error);
+          resolve(data);
+        });
+      }),
+  ),
+);
+console.log('Fonts imported');
 
 export default async function render(element: ReactNode) {
   const svg = await satori(element, {
     width: 640,
     fonts: [
-      { data: robotoFlex, name: 'Roboto Flex', weight: 400 },
-      { data: robotoFlexBold, name: 'Roboto Flex', weight: 700 },
-      { data: robotoFlexBlack, name: 'Roboto Flex', weight: 900 },
+      { data: robotoFlex, name: FONT_NAME, weight: 400 },
+      { data: robotoFlexBold, name: FONT_NAME, weight: 700 },
+      { data: robotoFlexBlack, name: FONT_NAME, weight: 900 },
     ],
   });
   const png = new Resvg(svg).render().asPng();