diff --git a/src/components/Themes/lib/typography/utils.ts b/src/components/Themes/lib/typography/utils.ts
index ce40cf70c6f0..8ac2b501bf68 100644
--- a/src/components/Themes/lib/typography/utils.ts
+++ b/src/components/Themes/lib/typography/utils.ts
@@ -11,7 +11,7 @@ import {
 } from './constants';
 
 export const createFontLinkImport = (fontLink: string) => {
-    return `@import(${fontLink});`;
+    return `@import url('${fontLink}');`;
 };
 
 export const createFontFamilyVariable = (
diff --git a/src/components/Themes/ui/TypographyTab/Preview.tsx b/src/components/Themes/ui/TypographyTab/Preview.tsx
index 55f80af8156e..3c5de94c78f1 100644
--- a/src/components/Themes/ui/TypographyTab/Preview.tsx
+++ b/src/components/Themes/ui/TypographyTab/Preview.tsx
@@ -144,7 +144,7 @@ export const Preview = () => {
                 <ThemeProvider theme="dark" scoped rootClassName={`${b()} ${b({theme: 'dark'})}`}>
                     {themeStyles ? (
                         <style>
-                            {`.gravity-ui-landing-typography-tab__preview_theme_dark {${themeStyles.dark}}`}
+                            {`${themeStyles.fontImports}\n.gravity-ui-landing-typography-tab__preview_theme_dark {${themeStyles.dark}}`}
                         </style>
                     ) : null}
                     <Flex gap={10} style={{padding: 80}} justifyContent="center">