Use Tajwal font for Arabic

app/soapbox/components/ui/text/text.tsx

@@ -1,6 +1,8 @@
 import classNames from 'clsx';
 import React from 'react';
 
+import { useLocale } from 'soapbox/hooks';
+
 const themes = {
   default: 'text-gray-900 dark:text-gray-100',
   danger: 'text-danger-600',
@@ -103,6 +105,8 @@ const Text = React.forwardRef<any, IText>(
       ...filteredProps
     } = props;
 
+    const locale = useLocale();
+
     const Comp: React.ElementType = tag;
 
     const alignmentClass = typeof align === 'string' ? alignments[align] : '';
@@ -122,7 +126,8 @@ const Text = React.forwardRef<any, IText>(
           [themes[theme]]: true,
           [weights[weight]]: true,
           [trackingSizes[tracking]]: true,
-          [families[family]]: true,
+          'font-arabic': family === 'sans' && locale.direction === 'rtl',
+          [families[family]]: family !== 'sans' || locale.direction !== 'rtl',
           [alignmentClass]: typeof align !== 'undefined',
           [transformProperties[transform]]: typeof transform !== 'undefined',
         }, className)}

app/soapbox/containers/soapbox.tsx

@@ -241,6 +241,17 @@ const SoapboxLoad: React.FC<ISoapboxLoad> = ({ children }) => {
     });
   }, []);
 
+  useEffect(() => {
+    if (locale === 'ar') {
+      import('@fontsource/tajawal/200.css');
+      import('@fontsource/tajawal/300.css');
+      import('@fontsource/tajawal/400.css');
+      import('@fontsource/tajawal/500.css');
+      import('@fontsource/tajawal/700.css');
+      import('@fontsource/tajawal/900.css');
+    }
+  }, [locale]);
+
   // intl is part of loading.
   // It's important nothing in here depends on intl.
   if (showLoading) {

package.json

@@ -51,6 +51,7 @@
     "@babel/runtime": "^7.18.3",
     "@fontsource/inter": "^4.5.1",
     "@fontsource/roboto": "^4.5.0",
+    "@fontsource/tajawal": "^4.5.9",
     "@gamestdio/websocket": "^0.3.2",
     "@jest/globals": "^28.1.2",
     "@lcdp/offline-plugin": "^5.1.0",

tailwind.config.js

@@ -42,6 +42,9 @@ module.exports = {
           'ui-monospace',
           'mono',
         ],
+        'arabic': [
+          'Tajawal',
+        ],
       },
       spacing: {
         '4.5': '1.125rem',

types/@fontsource/index.d.ts

@@ -0,0 +1 @@
+declare module '@fontsource/*.css';

yarn.lock

@@ -1404,6 +1404,11 @@
   resolved "https://registry.yarnpkg.com/@fontsource/roboto/-/roboto-4.5.0.tgz#d6f925668ba6af46707f1040c43aff498ba204bb"
   integrity sha512-ja4XYw/9kNRFM5Ndk9vwzHWsdBMXczyBazFkTXJQ74QQBnT0BbSsHn0pF60AU0Iznig1Wt9x3rADfG8LANvMpw==
 
+"@fontsource/tajawal@^4.5.9":
+  version "4.5.9"
+  resolved "https://registry.yarnpkg.com/@fontsource/tajawal/-/tajawal-4.5.9.tgz#1a795f24a430cb4b021dd44488f0054ed920c9af"
+  integrity sha512-hAsD6SkhnMP9g8WE/uS2q4GwWWq3HB6OEJ+6ImbsTZsszs4Insu/39G8hlE+BtvwI8bg5f8uuhpM0Re4FDbrPw==
+
 "@formatjs/ecma402-abstract@1.11.4":
   version "1.11.4"
   resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz#b962dfc4ae84361f9f08fbce411b4e4340930eda"