Add font: "Amiri Quran Regular"

share/al-quran.reflectslight.io/CHANGELOG

@@ -2,6 +2,10 @@
 
 ** vNEXT
 
+**** Add "Amiri Quran Regular" font
+This new font is used specifically for the contents of a surah
+in the Arabic locale / language
+
 **** Replace custom z-index rule
 Replace custom z-index rule with the CSS class ~.z-10~
 

src/css/main/SurahStream.scss

@@ -19,6 +19,11 @@ body .root .content.theme {
 }
 
 body .root .content.theme.rtl {
+  ul.body.stream[lang="ar"] {
+    li.ayah p {
+      font-family: "Amiri Quran Regular";
+    }
+  }
   ul.body.stream {
     li.ayah p {
       max-width: 470px;

src/js/components/SurahStream/Stream.tsx

@@ -21,6 +21,7 @@ export function Stream({
   t,
 }: Props) {
   const className = endOfStream || isPaused ? ["scroll-y"] : [];
+  const isArabic = locale.name === "ar";
   const ref = useRef<HTMLUListElement>(null);
   const ul = useMemo<JSX.Element>(() => {
     const ltr = locale.direction === "ltr";
@@ -37,7 +38,13 @@ export function Stream({
       >
         {stream.map((ayah: Ayah) => {
           return (
-            <li key={ayah.id} className="ayah fade mb-5">
+            <li
+              key={ayah.id}
+              className={classNames("ayah fade", {
+                "mb-10": isArabic,
+                "mb-5": !isArabic,
+              })}
+            >
               <span
                 className={classNames("flex h-8 items-center", { "mb-2": rtl })}
               >
@@ -59,7 +66,9 @@ export function Stream({
                   {formatNumber(locale, surah.ayat.length)}
                 </span>
               </span>
-              <p className="m-0">{ayah.body}</p>
+              <p className={classNames("m-0", { "text-2xl": isArabic })}>
+                {ayah.body}
+              </p>
             </li>
           );
         })}

src/js/loaders/SurahStreamLoader.ts

@@ -22,6 +22,7 @@ import { formatNumber } from "~/lib/t";
     item.script(`/js/main/vendor.js?v=${rev}`, { id: "0" }),
     item.script(`/js/main/surah-stream.js?v=${rev}`, { id: "1" }),
     item.font("Kanit Regular", "url(/fonts/kanit-regular.ttf)"),
+    item.font("Amiri Quran Regular", "url(/fonts/amiri-quran-regular.ttf)"),
     /* eslint-disable */
     item.json(`/json/${doc.lang}/${surahId}/info.json?v=${rev}`, { className: "json surahinfo" }),
     item.json(`/json/${doc.lang}/${surahId}/surah.json?v=${rev}`, { className: "json surah" }),