fix(theme): load language-specific font and fix font not updating on language change

src/index.css

@@ -111,3 +111,127 @@
       url('./assets/fonts/ttf/iranyekanwebextrablackfanum.ttf')
       format('truetype');
 }
+
+@font-face {
+  font-family: iranyekanEnNum;
+  font-style: normal;
+  font-weight: bold;
+  src: url('./assets/fonts/eot/iranyekanwebbold.eot');
+  src:
+    url('./assets/fonts/eot/iranyekanwebbold.eot?#iefix')
+      format('embedded-opentype'),
+    /* IE6-8 */ url('./assets/fonts/woff/iranyekanwebbold.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+      url('./assets/fonts/woff2/iranyekanwebbold.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/
+      url('./assets/fonts/ttf/iranyekanwebbold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: iranyekanEnNum;
+  font-style: normal;
+  font-weight: 100;
+  src: url('./assets/fonts/eot/iranyekanwebthin.eot');
+  src:
+    url('./assets/fonts/eot/iranyekanwebthin.eot?#iefix')
+      format('embedded-opentype'),
+    /* IE6-8 */ url('./assets/fonts/woff/iranyekanwebthin.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+      url('./assets/fonts/woff2/iranyekanwebthin.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/
+      url('./assets/fonts/ttf/iranyekanwebthin.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: iranyekanEnNum;
+  font-style: normal;
+  font-weight: 300;
+  src: url('./assets/fonts/eot/iranyekanweblight.eot');
+  src:
+    url('./assets/fonts/eot/iranyekanweblight.eot?#iefix')
+      format('embedded-opentype'),
+    /* IE6-8 */ url('./assets/fonts/woff/iranyekanweblight.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+      url('./assets/fonts/woff2/iranyekanweblight.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/
+      url('./assets/fonts/ttf/iranyekanweblight.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: iranyekanEnNum;
+  font-style: normal;
+  font-weight: normal;
+  src: url('./assets/fonts/eot/iranyekanwebregular.eot');
+  src:
+    url('./assets/fonts/eot/iranyekanwebregular.eot?#iefix')
+      format('embedded-opentype'),
+    /* IE6-8 */ url('./assets/fonts/woff/iranyekanwebregular.woff')
+      format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+      url('./assets/fonts/woff2/iranyekanwebregular.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/
+      url('./assets/fonts/ttf/iranyekanwebregular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: iranyekanEnNum;
+  font-style: normal;
+  font-weight: 500;
+  src: url('./assets/fonts/eot/iranyekanwebmedium.eot');
+  src:
+    url('./assets/fonts/eot/iranyekanwebmedium.eot?#iefix')
+      format('embedded-opentype'),
+    /* IE6-8 */ url('./assets/fonts/woff/iranyekanwebmedium.woff')
+      format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+      url('./assets/fonts/woff2/iranyekanwebmedium.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/
+      url('./assets/fonts/ttf/iranyekanwebmedium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: iranyekanEnNum;
+  font-style: normal;
+  font-weight: 800;
+  src: url('./assets/fonts/eot/iranyekanwebextrabold.eot');
+  src:
+    url('./assets/fonts/eot/iranyekanwebextrabold.eot?#iefix')
+      format('embedded-opentype'),
+    /* IE6-8 */ url('./assets/fonts/woff/iranyekanwebextrabold.woff')
+      format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+      url('./assets/fonts/woff2/iranyekanwebextrabold.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/
+      url('./assets/fonts/ttf/iranyekanwebextrabold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: iranyekanEnNum;
+  font-style: normal;
+  font-weight: 850;
+  src: url('./assets/fonts/eot/iranyekanwebblack.eot');
+  src:
+    url('./assets/fonts/eot/iranyekanwebblack.eot?#iefix')
+      format('embedded-opentype'),
+    /* IE6-8 */ url('./assets/fonts/woff/iranyekanwebblack.woff') format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+      url('./assets/fonts/woff2/iranyekanwebblack.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/
+      url('./assets/fonts/ttf/iranyekanwebblack.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: iranyekanEnNum;
+  font-style: normal;
+  font-weight: 900;
+  src: url('./assets/fonts/eot/iranyekanwebextrablack.eot');
+  src:
+    url('./assets/fonts/eot/iranyekanwebextrablack.eot?#iefix')
+      format('embedded-opentype'),
+    /* IE6-8 */ url('./assets/fonts/woff/iranyekanwebextrablack.woff')
+      format('woff'),
+    /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
+      url('./assets/fonts/woff2/iranyekanwebextrablack.woff2') format('woff2'),
+    /* FF39+,Chrome36+, Opera24+*/
+      url('./assets/fonts/ttf/iranyekanwebextrablack.ttf') format('truetype');
+}

src/providers/CustomThemeProvider.tsx

@@ -10,7 +10,10 @@ export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({
   const { i18n } = useTranslation();
 
   const theme = useMemo(() => {
+    console.log('Theme recalculated, lang:', i18n.language);
     const direction = i18n.dir(i18n.language);
+    const isEnglish = i18n.language?.startsWith('en');
+    const fontFamily = isEnglish ? 'iranyekanEnNum' : 'iranyekan';
 
     return createTheme({
       direction: direction,
@@ -29,7 +32,10 @@ export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({
       shape: {
         borderRadius: 8,
       },
-      typography: typography,
+      typography: {
+        fontFamily: [fontFamily, 'sans-serif'].join(','),
+        ...typography,
+      },
       components: {
         MuiButton: {
           defaultProps: {
@@ -59,7 +65,7 @@ export const CustomThemeProvider: React.FC<{ children: React.ReactNode }> = ({
         },
       },
     });
-  }, [i18n]);
+  }, [i18n, i18n.language]);
 
   return (
     <ThemeProvider theme={theme} defaultMode="light">

src/theme/typography.ts

@@ -1,6 +1,5 @@
 // No need for a function, just a static object
 export const typography = {
-  fontFamily: ['iranyekan', 'sans-serif'].join(','),
   fontWeightRegular: 400,
   fontWeightMedium: 500,
   fontWeightBold: 700,