feat(fonts): add support for thai text

usenocturne · Dec 19, 2024 · c508249 · c508249
1 parent 3af3854
commit c508249
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 1 deletion.
diff --git a/src/constants/fonts.js b/src/constants/fonts.js
@@ -121,6 +121,15 @@ export const notoSansTA = localFont({
   unicode: ["\u0B80-\u0BFF"],
 });
 
+export const notoSansTH = localFont({
+  src: "../fonts/NotoSansTH-VF.woff2",
+  variable: "--font-noto-sans-th",
+  preload: false,
+  display: "swap",
+  fallback: ["system-ui", "sans-serif"],
+  unicode: ["\u0E00-\u0E7F"],
+});
+
 export function detectTextScript(text) {
   if (!text) return "latin";
 
@@ -134,6 +143,7 @@ export function detectTextScript(text) {
     bengali: /[\u0980-\u09FF]/,
     traditionalChinese: /[\u4E00-\u9FFF]/,
     tamil: /[\u0B80-\u0BFF]/,
+    thai: /[\u0E00-\u0E7F]/,
   };
 
   for (const [script, regex] of Object.entries(scripts)) {
@@ -176,6 +186,7 @@ export const fontFamilyForScript = {
   hebrew: `var(--font-noto-sans-he), var(--font-inter)`,
   bengali: `var(--font-noto-sans-bn), var(--font-inter)`,
   tamil: `var(--font-noto-sans-ta), var(--font-inter)`,
+  thai: `var(--font-noto-sans-th), var(--font-inter)`,
 };
 
 export function useDynamicFont(text) {

diff --git a/src/fonts/NotoSansTH-VF.woff2 b/src/fonts/NotoSansTH-VF.woff2
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
@@ -30,6 +30,7 @@ import {
   notoSansHE,
   notoSansBN,
   notoSansTA,
+  notoSansTH,
 } from "../constants/fonts";
 
 const initialAuthState = () => {
@@ -117,7 +118,7 @@ export default function App({ Component, pageProps }) {
   const [networkStatus, setNetworkStatus] = useState({ isConnected: false });
   const inactivityTimeoutRef = useRef(null);
   const lastActivityTimeRef = useRef(Date.now());
-  const mainFontClasses = `${inter.variable} ${notoSansSC.variable} ${notoSansTC.variable} ${notoSerifJP.variable} ${notoSansKR.variable} ${notoNaskhAR.variable} ${notoSansDV.variable} ${notoSansHE.variable} ${notoSansBN.variable} ${notoSansTA.variable}`;
+  const mainFontClasses = `${inter.variable} ${notoSansSC.variable} ${notoSansTC.variable} ${notoSerifJP.variable} ${notoSansKR.variable} ${notoNaskhAR.variable} ${notoSansDV.variable} ${notoSansHE.variable} ${notoSansBN.variable} ${notoSansTA.variable} ${notoSansTH.variable}`;
 
   useEffect(() => {
     const checkInitialConnectivity = async () => {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -19,6 +19,7 @@ module.exports = {
           "var(--font-noto-sans-he)",
           "var(--font-noto-sans-bn)",
           "var(--font-noto-sans-ta)",
+          "var(--font-noto-sans-th)",
         ],
       },
       letterSpacing: {