Update font (#2289)

* Update ProximaVara font * Update OpenSans * Change font to Figtree
quran · Feb 4, 2025 · 16a9766 · 16a9766
1 parent 1571a68
commit 16a9766
Show file tree

Hide file tree

Showing 10 changed files with 17 additions and 17 deletions.
diff --git a/.storybook/styles.scss b/.storybook/styles.scss
@@ -3,7 +3,7 @@
 }
 
 * {
-    font-family: "ProximaVara", "Helvetica Neue", Helvetica, Arial !important;
+    font-family: "Figtree", "Helvetica Neue", Helvetica, Arial !important;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
diff --git a/next.config.js b/next.config.js
@@ -21,7 +21,7 @@ const withPWAConfig = withPWA({
   disable: !isProduction,
   mode: isProduction ? 'production' : 'development',
   publicExcludes: [
-    '!fonts/**/!(sura_names|ProximaVara)*', // exclude pre-caching all fonts that are not sura_names or ProximaVara
+    '!fonts/**/!(sura_names|Figtree)*', // exclude pre-caching all fonts that are not sura_names or Figtree
     '!icons/**', // exclude all icons
     '!images/**/!(background|homepage)*', // don't pre-cache except background.jpg and homepage.png
   ],

diff --git a/public/fonts/lang/Figtree/Figtree.ttf b/public/fonts/lang/Figtree/Figtree.ttf
diff --git a/public/fonts/lang/ProximaVara/ProximaVara.woff2 b/public/fonts/lang/ProximaVara/ProximaVara.woff2
diff --git a/public/publicMin/Figtree.ttf b/public/publicMin/Figtree.ttf
diff --git a/src/components/Fonts/FontPreLoader.tsx b/src/components/Fonts/FontPreLoader.tsx
@@ -11,7 +11,7 @@ const SURAH_NAMES_FONT = {
 
 const LOCALE_PRELOADED_FONTS = {
   [DEFAULT_LOCALE]: [
-    { type: 'font/woff2', location: '/fonts/lang/ProximaVara/ProximaVara.woff2' },
+    { type: 'font/woff2', location: '/fonts/lang/Figtree/Figtree.ttf' },
     { ...SURAH_NAMES_FONT },
   ],
   ar: [

diff --git a/src/components/MediaMaker/Content/MediaMakerContent.module.scss b/src/components/MediaMaker/Content/MediaMakerContent.module.scss
@@ -53,13 +53,13 @@ $white: #ffffff;
 
 .translation {
   direction: ltr;
-  font-family: "ProximaVara" !important;
+  font-family: "Figtree" !important;
 }
 .watermark {
   text-align: center;
   color: $white;
   font-size: 19px;
-  font-family: "ProximaVara" !important;
+  font-family: "Figtree" !important;
   font-weight: var(--font-weight-bold);
 }
 
@@ -113,7 +113,7 @@ $white: #ffffff;
   font-size: 24px;
   font-weight: 400;
   color: $white;
-  font-family: "ProximaVara" !important;
+  font-family: "Figtree" !important;
 }
 
 .surahArabic {

diff --git a/src/components/MediaMaker/Root.tsx b/src/components/MediaMaker/Root.tsx
@@ -29,9 +29,9 @@ export const RemotionRoot = () => {
     `Indopak`,
     `url('${staticFile('/indopak-nastaleeq-waqf-lazim-v4.2.1.woff2')}') format('woff2')`,
   );
-  const proximaVaraFont = new FontFace(
-    `ProximaVara`,
-    `url('${staticFile('/ProximaVara.woff2')}') format('woff2')`,
+  const FigtreeFont = new FontFace(
+    `Figtree`,
+    `url('${staticFile('/Figtree.ttf')}') format('woff2')`,
   );
   const playfairDisplay = new FontFace(
     'PlayfairDisplay',
@@ -42,14 +42,14 @@ export const RemotionRoot = () => {
     uthmanicHafsFont.load(),
     notoNastaliqFont.load(),
     indopakFont.load(),
-    proximaVaraFont.load(),
+    FigtreeFont.load(),
     playfairDisplay.load(),
   ])
     .then(() => {
       document.fonts.add(uthmanicHafsFont);
       document.fonts.add(notoNastaliqFont);
       document.fonts.add(indopakFont);
-      document.fonts.add(proximaVaraFont);
+      document.fonts.add(FigtreeFont);
       document.fonts.add(playfairDisplay);
       continueRender(waitForFont);
     })

diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
@@ -87,8 +87,8 @@
 
 // Fallback for browsers that don't support variable fonts
 @font-face {
-  font-family: "ProximaVara";
-  src: local("Proxima Vara"), url("/fonts/lang/ProximaVara/ProximaVara.woff2");
+  font-family: "Figtree";
+  src: local("Open Sans"), url("/fonts/lang/Figtree/Figtree.ttf");
   font-weight: 100 900;
   /* default 400 */
   font-stretch: 50% 100%;

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -16,7 +16,7 @@ body {
   }
 
   overscroll-behavior-y: none;
-  font-family: "ProximaVara", "Helvetica Neue", Helvetica, Arial;
+  font-family: "Figtree", "Helvetica Neue", Helvetica, Arial;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
@@ -31,16 +31,16 @@ body {
 
   :lang(ar),
   :lang(arabic) .ar {
-    font-family: "Noto Nastaliq Arabic", "NotoNastaliq", "ProximaVara", "Helvetica Neue", Helvetica, Arial;
+    font-family: "Noto Nastaliq Arabic", "NotoNastaliq", "Figtree", "Helvetica Neue", Helvetica, Arial;
   }
 
   :lang(bn),
   :lang(bengali) {
-    font-family: "NotoSerifBengali", "ProximaVara", "Helvetica Neue", Helvetica, Arial;
+    font-family: "NotoSerifBengali", "Figtree", "Helvetica Neue", Helvetica, Arial;
   }
 
   :lang(ku) {
-    font-family: "DroidArabicNaskh", "Noto Nastaliq Arabic", "NotoNastaliq", "ProximaVara", Helvetica, Arial;
+    font-family: "DroidArabicNaskh", "Noto Nastaliq Arabic", "NotoNastaliq", "Figtree", Helvetica, Arial;
   }
 }