Replace 'Amiri Quran Regular' with 'Amiri Regular'

share/al-quran.reflectslight.io/CHANGELOG.txt

@@ -2,6 +2,11 @@
 
 * vNEXT
 
+** Fix the render of Amiri font on iOS
+On modern versions of iOS the "Amiri Quran Regular" font rendered
+as invisible text. This change reverts to the "Amiri Regular" font
+instead, which appears to render without any issues
+
 ** Download fonts based on language direction
 RTL and LTR languages use a different set of fonts, and before this
 change we would download all fonts regardless of whether the font

src/css/_base.scss

@@ -44,7 +44,7 @@ html {
     }
 
     .font-amiri {
-      font-family: "Amiri Quran Regular", "Scheherazade", "Arial", sans-serif;
+      font-family: "Amiri Regular", "Scheherazade", "Arial", sans-serif;
     }
   }
 }

src/js/components/SurahStream/Stream.tsx

@@ -38,7 +38,7 @@ export function Stream({
             <li
               key={ayah.id}
               className={classNames("ayah fade", {
-                "mb-12": isArabic,
+                "mb-8": isArabic,
                 "mb-5": !isArabic,
               })}
             >
@@ -63,7 +63,7 @@ export function Stream({
               </span>
               <p
                 className={classNames("m-0 color-accent", {
-                  "text-2xl mt-2": isArabic,
+                  "text-2xl mt-5": isArabic,
                 })}
               >
                 {ayah.body}

src/js/loaders/SurahStreamLoader.ts

@@ -23,7 +23,7 @@ import { formatNumber } from "~/lib/t";
       return [
         item.font("Cairo Regular", "url(/fonts/cairo-regular.ttf)"),
         item.font("Cairo Bold", "url(/fonts/cairo-bold.ttf)"),
-        item.font("Amiri Quran Regular", "url(/fonts/amiri-quran-regular.ttf)"),
+        item.font("Amiri Regular", "url(/fonts/amiri-regular.ttf)"),
       ];
     } else {
       return [item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)")];