feat: add vazirmatn font for persian example

examples-app/src/index.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap');
+
 :root {
   --ifm-background-color: #242424;
   --ifm-menu-color-background-hover: rgba(255, 255, 255, 0.05);
@@ -69,3 +71,10 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+.rdp-root:lang(ar),
+.rdp-root:lang(fa),
+.rdp-root:lang(ckb),
+.rdp-root:lang(ug) {
+  font-family: 'Vazirmatn', Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}

website/docs/localization/changing-locale.mdx

@@ -38,10 +38,14 @@ import { arSA } from "react-day-picker/locale";
 <DayPicker locale={arSA} />;
 ```
 
-You can target locale-specific styles with the CSS `:lang(...)` selector:
+You can target locale-specific styles with the CSS `:lang(...)` selector.
+For Arabic-script locales in DayPicker (`ar*`, `fa-IR`, `ckb`, `ug`), apply your font with language selectors instead of `dir`:
 
 ```css
-.rdp-root:lang(ar) {
+.rdp-root:lang(ar),
+.rdp-root:lang(fa),
+.rdp-root:lang(ckb),
+.rdp-root:lang(ug) {
   font-family: "Noto Naskh Arabic", serif;
 }
 ```

website/docusaurus.config.ts

@@ -69,6 +69,7 @@ const config: Config = {
   // Modern font
   stylesheets: [
     "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap",
   ],
 
   plugins: [

website/src/components/ShadowDomWrapper.tsx

@@ -18,6 +18,13 @@ export function ShadowDomWrapper({
         .rdp-root {
           --rdp-accent-color: var(--ifm-color-primary);
         }
+
+        .rdp-root:lang(ar),
+        .rdp-root:lang(fa),
+        .rdp-root:lang(ckb),
+        .rdp-root:lang(ug) {
+          font-family: 'Vazirmatn', system-ui, -apple-system, sans-serif;
+        }
       `}</style>
       {colorMode === "dark" && (
         <style>{`