From fd818a8eba83d7cecaa5fcce1bfe3379d921ac41 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 10 Oct 2023 16:54:57 -0500
Subject: [PATCH] Use Tajawal font for Arabic Fixes
 https://gitlab.com/soapbox-pub/soapbox/-/issues/1361

---
 package.json        |  1 +
 src/main.tsx        |  1 +
 src/styles/i18n.css | 62 +++++++++++++++++++++++++++++++++++++++++++++
 tailwind.config.cjs |  1 +
 yarn.lock           |  5 ++++
 5 files changed, 70 insertions(+)
 create mode 100644 src/styles/i18n.css

diff --git a/package.json b/package.json
index 3b7c598f5..aac07953f 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "@floating-ui/react": "^0.26.0",
     "@fontsource/inter": "^5.0.0",
     "@fontsource/roboto-mono": "^5.0.0",
+    "@fontsource/tajawal": "^5.0.8",
     "@gamestdio/websocket": "^0.3.2",
     "@lexical/clipboard": "^0.12.2",
     "@lexical/hashtag": "^0.12.2",
diff --git a/src/main.tsx b/src/main.tsx
index 9073b6bf6..9229995c9 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -18,6 +18,7 @@ import 'line-awesome/dist/font-awesome-line-awesome/css/all.css';
 import 'react-datepicker/dist/react-datepicker.css';
 
 import './iframe';
+import './styles/i18n.css';
 import './styles/application.scss';
 import './styles/tailwind.css';
 
diff --git a/src/styles/i18n.css b/src/styles/i18n.css
new file mode 100644
index 000000000..0d56b78c5
--- /dev/null
+++ b/src/styles/i18n.css
@@ -0,0 +1,62 @@
+@font-face {
+  font-family: 'Soapbox i18n';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200;
+  src: url('@fontsource/tajawal/files/tajawal-arabic-200-normal.woff2') format('woff2'), url('@fontsource/tajawal/files/tajawal-arabic-200-normal.woff') format('woff');
+  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
+}
+
+@font-face {
+  font-family: 'Soapbox i18n';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300;
+  src: url('@fontsource/tajawal/files/tajawal-arabic-300-normal.woff2') format('woff2'), url('@fontsource/tajawal/files/tajawal-arabic-300-normal.woff') format('woff');
+  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
+}
+
+@font-face {
+  font-family: 'Soapbox i18n';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 400;
+  src: url('@fontsource/tajawal/files/tajawal-arabic-400-normal.woff2') format('woff2'), url('@fontsource/tajawal/files/tajawal-arabic-400-normal.woff') format('woff');
+  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
+}
+
+@font-face {
+  font-family: 'Soapbox i18n';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 500;
+  src: url('@fontsource/tajawal/files/tajawal-arabic-500-normal.woff2') format('woff2'), url('@fontsource/tajawal/files/tajawal-arabic-500-normal.woff') format('woff');
+  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
+}
+
+@font-face {
+  font-family: 'Soapbox i18n';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 700;
+  src: url('@fontsource/tajawal/files/tajawal-arabic-700-normal.woff2') format('woff2'), url('@fontsource/tajawal/files/tajawal-arabic-700-normal.woff') format('woff');
+  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
+}
+
+@font-face {
+  font-family: 'Soapbox i18n';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 800;
+  src: url('@fontsource/tajawal/files/tajawal-arabic-800-normal.woff2') format('woff2'), url('@fontsource/tajawal/files/tajawal-arabic-800-normal.woff') format('woff');
+  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
+}
+
+@font-face {
+  font-family: 'Soapbox i18n';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 900;
+  src: url('@fontsource/tajawal/files/tajawal-arabic-900-normal.woff2') format('woff2'), url('@fontsource/tajawal/files/tajawal-arabic-900-normal.woff') format('woff');
+  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
+}
\ No newline at end of file
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 36b7a1efc..2e30e6d29 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -21,6 +21,7 @@ module.exports = {
       },
       fontFamily: {
         'sans': [
+          'Soapbox i18n',
           'Inter',
           'ui-sans-serif',
           'system-ui',
diff --git a/yarn.lock b/yarn.lock
index 5c8d8ca93..7fa150531 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1436,6 +1436,11 @@
   resolved "https://registry.yarnpkg.com/@fontsource/roboto-mono/-/roboto-mono-5.0.8.tgz#9b3df61f884f46e12d3eca46e75517fde58da68e"
   integrity sha512-vjnNX8zQCSp4HadUJ3gpZiizCsK/ROjgGMpd4bcRxuyiTNGGMaznmKbhqdyVeFVap1sX8h2Qu380awaotey/mQ==
 
+"@fontsource/tajawal@^5.0.8":
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/@fontsource/tajawal/-/tajawal-5.0.8.tgz#cd8a593ec5062b283b093b56ee5d38b6b97fa93d"
+  integrity sha512-KILlXB6B8YYcssz3pccPs/4s1XcXwTWogCtE4Ag3oTpK+81DIQLc2b9o77UiBP4yC17MmqeOp1lvoaJQP80RoA==
+
 "@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"