Skip to content

feat: Arabic font support with auto-switch and split font picker#11399

Open
AhmedAl-Bahrawy wants to merge 2 commits into
excalidraw:masterfrom
AhmedAl-Bahrawy:master
Open

feat: Arabic font support with auto-switch and split font picker#11399
AhmedAl-Bahrawy wants to merge 2 commits into
excalidraw:masterfrom
AhmedAl-Bahrawy:master

Conversation

@AhmedAl-Bahrawy
Copy link
Copy Markdown

Summary

Add comprehensive Arabic font support to Excalidraw with 5 new Arabic fonts, a split font picker, and automatic script-based font switching.

Changes

  • 5 new Arabic fonts: Noto Naskh Arabic, Lemonada, Baloo Bhaijaan 2, Cairo Play, Changa — loaded from Google Fonts CDN
  • Split font picker: Arabic and English fonts grouped into separate labeled sections (English first)
  • Auto-switch: Detects Arabic vs Latin script in text input and switches to the corresponding font automatically
  • Per-script tracking: lastArabicFontFamily and lastLatinFontFamily app state properties remember the last font used per script
  • Default Arabic font: Lemonada
  • Bugfix: Multi-word font names (e.g. "Baloo Bhaijaan 2") are now properly quoted in CSS font-family output, fixing FontFaceSet.check() SyntaxError
  • Bugfix: @font-face CSS export now quotes font-family for names with spaces

Files changed

Package Files
@excalidraw/common constants.ts, font-metadata.ts, utils.ts
@excalidraw/excalidraw Fonts.ts, ExcalidrawFontFace.ts, textWysiwyg.tsx, FontPickerList.tsx, appState.ts, types.ts, actionProperties.tsx, locales/en.json, CHANGELOG.md
New fonts Lemonada/, BalooBhaijaan2/, CairoPlay/, Changa/, NotoNaskhArabic/

Add 5 Arabic fonts (Noto Naskh Arabic, Lemonada, Baloo Bhaijaan 2,
Cairo Play, Changa) loaded from Google Fonts CDN.

- Split font picker into Arabic/English sections with section headers
- Auto-switch between Arabic/Latin fonts based on text input script
- Track last used font per script (lastArabicFontFamily, lastLatinFontFamily)
- Lemonada is the default Arabic font
- Font names with spaces are properly quoted in CSS font-family output
- Fix FontFaceSet.check() SyntaxError for multi-word font names
- Quote font-family in @font-face CSS export
@vercel
Copy link
Copy Markdown

vercel Bot commented May 25, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
excalidraw Ready Ready Preview May 25, 2026 12:25pm
excalidraw-package-example Ready Ready Preview May 25, 2026 12:25pm
excalidraw-package-example-with-nextjs Ready Ready Preview May 25, 2026 12:25pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview May 25, 2026 12:25pm

Request Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant