Arabic Web Fonts for Interfaces, Apps and Dashboards

What an interface font needs

• A usable weight ladder: body text, labels, buttons and headings each need a step. Count the weights your design system really uses.
• Clarity at small sizes: low contrast and open counters keep dots and joins clear in labels and form fields.
• Latin in the same family: menus, product names, email addresses and code often mix both scripts on one line.
• Few bytes to load: each static weight is a separate download for the visitor, while a variable file carries a whole range at once.
• A license that allows self-hosting: check the license supplied with each family. Most use the SIL Open Font License; Droid Arabic Kufi and Droid Arabic Naskh use Apache License 2.0. Both licenses allow self-hosting under their terms.

Which family for your interface

Tajawal runs from ExtraLight to Black with a matching Latin, for marketing sites that need display weights as well as body text. IBM Plex Sans Arabic, from Thin to Bold with Medium and SemiBold, suits dashboards and documentation, especially where Plex already sets the Latin. Almarai offers Light, Regular, Bold and ExtraBold for simple apps; it has no Medium or SemiBold.

Variable families widen the choice. Cairo, a Kufi-based design, runs from 200 to 1000 with a slant axis, the heaviest weight among the free fonts here. Noto Sans Arabic adds a width axis down to 62.5 for long labels. Noto Naskh Arabic, from 400 to 700, gives article pages a Naskh reading voice next to a sans interface.

Implementation tips

• Set lang="ar" and dir="rtl" on the html element of an Arabic site, and use CSS logical properties such as margin-inline-start so the layout mirrors on its own.
• For static families, declare one @font-face rule per weight you use. For a variable file, one rule with a weight range, such as font-weight: 200 1000 for Cairo, covers every step. Add font-display: swap so text shows while the font loads.
• If the CSS asks for a weight a static family lacks, such as 600 in Almarai, the browser falls back to the nearest file. Map your design tokens to the real weights.
• Give Arabic text more line height than Latin, and test it with vowel marks if your content uses them.

Most of these families belong to the modern sans style. For a method to compare them, read how to choose an Arabic font. For mixed-script layouts, see Arabic fonts with English; for embedded clips and reels, see Arabic fonts for video.