diff --git a/public/fonts/Inter-roman.var.woff2 b/public/fonts/Inter-roman.var.woff2
new file mode 100644
index 0000000..6a256a0
Binary files /dev/null and b/public/fonts/Inter-roman.var.woff2 differ
diff --git a/src/components/fonts.astro b/src/components/fonts.astro
new file mode 100644
index 0000000..751b74c
--- /dev/null
+++ b/src/components/fonts.astro
@@ -0,0 +1,10 @@
+<style is:global>
+  @font-face {
+    font-family: 'Inter var';
+    font-weight: 100 900;
+    font-display: swap;
+    font-style: normal;
+    font-named-instance: 'Regular';
+    src: url('/fonts/Inter-roman.var.woff2') format('woff2');
+  }
+</style>
diff --git a/src/pages/pdf.astro b/src/pages/pdf.astro
index 5fdfc3e..8a97228 100644
--- a/src/pages/pdf.astro
+++ b/src/pages/pdf.astro
@@ -1,4 +1,5 @@
 ---
+import Fonts from '@/components/fonts.astro';
 import Footer from '@/pdf/components/footer.astro';
 import EducationSection from '@/pdf/sections/education-section.pdf.astro';
 import ExperienceSection from '@/pdf/sections/experience-section.pdf.astro';
@@ -23,6 +24,7 @@ const shouldRenderSection = (section: keyof typeof sections) => sections[section
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
     <title>PDF preview</title>
+    <Fonts />
   </head>
   <body class="flex flex-col bg-white p-[10mm] print:p-0">
     {shouldRenderSection('main') && <MainSection {...sections.main} />}
diff --git a/src/web/components/head.astro b/src/web/components/head.astro
index b9d8868..d279185 100644
--- a/src/web/components/head.astro
+++ b/src/web/components/head.astro
@@ -1,8 +1,8 @@
 ---
+import Fonts from '@/components/fonts.astro';
 import Favicons from '@/web/head/favicons.auto-generated.astro';
 import InitialTheme from '@/web/head/initial-theme.astro';
 import Meta from '@/web/head/meta.astro';
-
 import type { MetaConfig } from '@/types/config/meta-config.types';
 
 interface Props {
@@ -16,4 +16,5 @@ const { meta } = Astro.props;
   <Meta meta={meta} />
   <Favicons />
   <InitialTheme />
+  <Fonts />
 </head>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 03ca7f5..9e948ea 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,4 +1,5 @@
 const colors = require('tailwindcss/colors');
+const defaultTheme = require('tailwindcss/defaultTheme');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -22,6 +23,9 @@ module.exports = {
       animation: {
         show: 'show 225ms ease-in-out',
       },
+      fontFamily: {
+        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+      },
     },
   },
   plugins: [],
