feat(fonts): add support for arabic text

usenocturne · Dec 19, 2024 · 8698b53 · 8698b53
1 parent 1985e57
commit 8698b53
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 3 deletions.
diff --git a/src/constants/fonts.js b/src/constants/fonts.js
@@ -32,7 +32,7 @@ export const notoSansSC = localFont({
   variable: "--font-noto-sans-sc",
 });
 
-export const notoSansJP = localFont({
+export const notoSerifJP = localFont({
   src: "../fonts/NotoSerifJP-VF.woff2",
   variable: "--font-noto-sans-jp",
 });
@@ -41,3 +41,13 @@ export const notoSansKR = localFont({
   src: "../fonts/NotoSerifKR-VF.woff2",
   variable: "--font-noto-sans-kr",
 });
+
+export const notoSerifKR = localFont({
+  src: "../fonts/NotoSerifKR-VF.woff2",
+  variable: "--font-noto-sans-kr",
+});
+
+export const notoNaskhAR = localFont({
+  src: "../fonts/NotoNaskhAR-VF.woff2",
+  variable: "--font-noto-naskh-ar",
+});
diff --git a/src/fonts/NotoNaskhAR-VF.woff2 b/src/fonts/NotoNaskhAR-VF.woff2
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
@@ -19,7 +19,13 @@ import {
   checkNetworkConnectivity,
   startNetworkMonitoring,
 } from "../lib/networkChecker";
-import { inter, notoSansSC, notoSansJP, notoSansKR } from "../constants/fonts";
+import {
+  inter,
+  notoSansSC,
+  notoSerifJP,
+  notoSerifKR,
+  notoNaskhAR,
+} from "../constants/fonts";
 
 const initialAuthState = () => {
   if (typeof window === "undefined") {
@@ -1778,7 +1784,7 @@ export default function App({ Component, pageProps }) {
     <main
       className={`overflow-hidden relative min-h-screen rounded-2xl ${inter.className}`}
       style={{
-        fontFamily: `${inter.style.fontFamily}, ${notoSansSC.style.fontFamily}, ${notoSansJP.style.fontFamily}, ${notoSansKR.style.fontFamily}, sans-serif`,
+        fontFamily: `${inter.style.fontFamily}, ${notoSansSC.style.fontFamily}, ${notoSerifJP.style.fontFamily}, ${notoSerifKR.style.fontFamily}, ${notoNaskhAR.style.fontFamily}, sans-serif`,
         fontOpticalSizing: "auto",
       }}
     >

diff --git a/src/pages/now-playing.jsx b/src/pages/now-playing.jsx
@@ -930,6 +930,12 @@ const NowPlaying = ({
     </svg>
   );
 
+  const isArabicText = (text) => {
+    const arabicRegex =
+      /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/;
+    return arabicRegex.test(text);
+  };
+
   return (
     <>
       {open && (
@@ -1041,6 +1047,10 @@ const NowPlaying = ({
                         index === currentLyricIndex
                           ? "text-white"
                           : "text-white/60"
+                      } ${
+                        isArabicText(lyric.text)
+                          ? "text-right font-noto-naskh-ar"
+                          : ""
                       }`}
                     >
                       {lyric.text}

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -13,6 +13,7 @@ module.exports = {
           "var(--font-noto-sans-sc)",
           "var(--font-noto-sans-jp)",
           "var(--font-noto-sans-kr)",
+          "var(--font-noto-naskh-ar)",
         ],
       },
       letterSpacing: {