diff --git a/.storybook/preview.js b/.storybook/preview.js
index dd3524ef..79fac20e 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,7 +1,7 @@
import '../source/00-config/index.css';
+import sourceSansPro from '../source/01-global/fonts/source-sans';
import '../source/01-global/index.css';
import '../source/06-utility/index.css';
-import SourceSansFontStyle from '../source/01-global/fonts/source-sans';
const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
@@ -67,14 +67,16 @@ const withWritingDirection = (Story, context) => {
);
};
-const withFont = Story => (
- <>
-
+const withFonts = Story => (
+
-
+
);
-const decorators = [withWritingDirection, withFont];
+const decorators = [withWritingDirection, withFonts];
const preview = {
parameters,
diff --git a/app/layout.tsx b/app/layout.tsx
index ec87fe2a..41017139 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,6 @@
import { JSX, PropsWithChildren } from 'react';
import '../source/00-config/index.css';
-import SourceSansFontStyle from '../source/01-global/fonts/source-sans';
+import sourceSansPro from '../source/01-global/fonts/source-sans';
import '../source/01-global/index.css';
import Footer from '../source/02-layouts/Footer/Footer';
import Header from '../source/02-layouts/Header/Header';
@@ -15,9 +15,8 @@ import '../source/06-utility/index.css';
function RootLayout({ children }: PropsWithChildren): JSX.Element {
return (
-
+
-
diff --git a/source/01-global/fonts/source-sans.ts b/source/01-global/fonts/source-sans.ts
new file mode 100644
index 00000000..43fc85cd
--- /dev/null
+++ b/source/01-global/fonts/source-sans.ts
@@ -0,0 +1,11 @@
+import { Source_Sans_3 as SourceSansPro } from 'next/font/google';
+
+const sourceSansPro = SourceSansPro({
+ display: 'auto',
+ subsets: ['latin'],
+ weight: 'variable',
+ fallback: ['Arial', 'sans-serif'],
+ variable: '--font-family-primary',
+});
+
+export default sourceSansPro;
diff --git a/source/01-global/fonts/source-sans.tsx b/source/01-global/fonts/source-sans.tsx
deleted file mode 100644
index 7266811f..00000000
--- a/source/01-global/fonts/source-sans.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client';
-
-import { Source_Sans_3 as SourceSansPro } from 'next/font/google';
-
-const sourceSansPro = SourceSansPro({
- display: 'swap',
- subsets: ['latin'],
- weight: 'variable',
-});
-
-function SourceSansFontStyle() {
- return (
-
- );
-}
-
-export default SourceSansFontStyle;