Add a fixed font for farsi (#1168)

Adds vazirmatn as a fixed font for farsi as suggested in issue:
#1141

package.json

@@ -24,6 +24,7 @@
     "@emotion/babel-plugin": "^11.11.0",
     "@emotion/react": "^11.11.3",
     "@fontsource-variable/roboto-flex": "^5.0.8",
+    "@fontsource-variable/vazirmatn": "^5.0.20",
     "@iarna/toml": "^2.2.5",
     "@opencast/appkit": "^0.2.4",
     "@svgr/webpack": "^8.1.0",

src/ui/global-style.tsx

@@ -19,7 +19,7 @@ const GLOBAL_STYLE = css({
     // // as well as `<progress>` elements.
     // accentColor: COLORS.primary0,
 
-    fontFamily: "'Roboto Flex Variable', sans-serif",
+    fontFamily: "'Roboto Flex Variable', 'Vazirmatn Variable', sans-serif",
     fontWeight: 400,
 
     // A reset to a sensible value.

webpack.config.ts

@@ -83,11 +83,9 @@ const config: CallableOption = (_env, argv) => ({
 
         // Copy the font related files to output directory
         {
-          from: path.join(__dirname, "node_modules/@fontsource-variable/roboto-flex/index.css"),
-          to: path.join(OUT_PATH, "font.css"),
-          transform: (input: Buffer) => {
-            return input.toString().replace(/url\(.\/files\//g, "url(./fonts/");
-          },
+          from: path.join(__dirname, "node_modules/@fontsource-variable/@(roboto-flex|vazirmatn)/index.css"),
+          to: "font.css",
+          transformAll: assets => assets.map(assets => assets.data).join("\n").replace(/url\(.\/files\//g, "url(./fonts/"),
         },
         ...(
           [
@@ -102,6 +100,10 @@ const config: CallableOption = (_env, argv) => ({
             to: path.join(OUT_PATH, "fonts", font),
           }))
         ),
+        {
+          from: path.join(__dirname, "node_modules/@fontsource-variable/vazirmatn/files/vazirmatn-arabic-wght-normal.woff2"),
+          to: path.join(OUT_PATH, "fonts", "vazirmatn-arabic-wght-normal.woff2"),
+        },
       ],
     }),
   ],