Arabic system font stack

Using fonts already existing on people’s computers is one way of marginally increasing site speed, and many sites have switched over from web fonts to system fonts for this reason.

The main reason for using “system” fonts is performance. Fonts are typically one of the largest/heaviest resources loaded on a website. If we can use a font already available on the user’s machine, we can completely eliminate the need to fetch this resource, making load times noticeably faster.
The beauty of system fonts is that it matches what the current OS uses, so it can be a comfortable look.

Necolas, Github discussion on normalise.css

Much has been written about it in English, but I was only able to find a couple of pre-made stacks in Arabic, both of which contained some fonts that don’t support Arabic, or which are commonly aliased but which result in weird display issues such as having the character glyphs in the fallback font (that supports Arabic) but the spaces being in the named font (that doesn’t support Arabic).

I started off by listing all the fonts on Mac OS, iOS, Windows, Ubuntu, and Android that support Arabic, and after shortlisting the most appropriate from each platform and getting some user feedback, I assembled the following font stacks.

body,
.serif { 
	font-family: "Geeza Pro", "Noto Naskh Arabic", "Droid Serif", "Times New Roman", serif; 
}
h1, h2, h3, h4, h5, h6,
.sans-serif { 
	font-family: -apple-system, system-ui, BlinkMacSystemFont, Dubai, "Segoe UI", Tahoma, "Noto Sans Arabic UI","Dejavu Sans", Arial, sans-serif;
}

Serif

Most discussions of system font stacks seem to focus on sans serif fonts, but I prefer to start with a serif font for the body text, and then use a serif font for headings.

Sans Serif

Emojis

To maintain emoji support, append the following system emoji fonts to the end:

"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Mac OS

-apple-system, BlinkMacSystemFont

The former vendor prefix works in Safari on Mac OS and iOS, while the latter works on Chrome on Mac OS and iOS. On newer versions of Mac OS, they are an alias for the San Francisco sans-serif typeface, which is used throughout the OS interface and has a consistent look in Arabic and English. On older Mac OS X versions they are an alias for Helvetica Neue or Lucida Grande.

San Francisco is a neo-grotesque typeface made by Apple Inc. It was first released to developers on November 18, 2014. It is the first new typeface designed at Apple in nearly twenty years and has been inspired by Helvetica and DIN.

Wikipedia

system-ui

system-ui should be sufficient without -apple-system and BlinkMacSystemFont, but I’ve kept them for backwards compatibility.

If you wish to remove them, then we can modify it for Arabic as follows:

system-ui, -apple-system, Dubai, "Segoe UI", Tahoma, "Noto Sans Arabic UI", "Dejavu Sans", Arial, sans-serif

Windows

An alternative serif font for Windows is Sakkal Majalla; it is very legible for paragraph text, but seems to display smaller than the other fonts in the stack.