How to change Universal Theme's font-family?

Eslam_Elbyaly wrote:

 

The default font does not look that good. It's not necessarily be Times New Roman.

What is the default font (use the Computed Styles developer tool in your browser to find out)? What doesn't look "good" about it?

Any good looking Arabic font will do the job.

Well I will freely admit that I am not going to be of any help there...

- What is the problem with choosing any font? Is it just that the browser could not be supporting it? Or Are there any other roadblocks?

If we look at the typeface selections now (19.2) being made for use by the APEX Universal Theme, we see that nearly all of them are (or have previously been) the default system font on a common platform or operating system:

body {
    min-width: 320px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    font-size: 1.4rem;
    margin: 0;
}

There are three main reasons for this:

1. Availability—APEX can be fairly sure that the default system fonts will exist on whatever device the app is running on.
2. Legibility—System fonts are designed or chosen specifically to be suitable for reading on a screen, and their rendering is highly optimized to ensure that they retain readability across a range of (usually small) sizes and varying weights. For the Latin alphabet this usually results in these fonts having certain features in common:
   • High x-heights
   • Small ascenders and descenders
   • Large counters and apertures
   • Clear distinction between glyphs that are prone to confusion, such as "I", "l", and "1"; "O", "Q" and "0" etc

   I have no idea what the Arabic equivalents of these would be.

3. Internationalization—As device and operating system vendors want to maximize sales of their products as possible, they will ensure that they can be used worldwide in as many languages as possible. Their system fonts will therefore include Unicode support for all of the characters required by those languages (e.g. French, German, Turkish, Russian, Arabic, Hebrew, Hindi, Thai, Vietnamese, Chinese etc). Depending on their origin, other fonts (especially older ones) may only include a limited set of glyphs covering the basic Latin alphabet or Arabic abjad.

Any choice of custom font must take at least the first two of these principles into account. The third can potentially be ignored if designing for a monolingual audience, but it would be good practice to consider using a font with good Unicode support to allow for future changes in requirements.

The use of these fonts also makes it somewhat surprising that in your case the "default font does not look that good" as it is likely to be the standard system font. The problem may not be the design of the typeface but how it is being rendered. Have you checked system properties like font scaling and anti-aliasing?

Eslam_Elbyaly wrote:

 

I am sure it's about the font. It's just the design is not appealing! My operating system runs in English not in Arabic.

This is what the computed tab says,

How can I know which one is the default font?

Inspect an element that you think looks poor. Chrome will show the font used in the Rendered Fonts section at the bottom of the Computed styles pane.

Is it about which fonts does the browser support? Or which fonts does the operating system support? I assume that if the OS does not support a specific font, then the browser won't as well, right?

No. Web fonts enable the use of fonts that don't exist on the device. These are downloaded only for use by that site or application.

I have been surfing the internet trying to figure out the difference between a Font and a TypeFace with no vain at all. Can you demystify it for me, please?

Art versus technology. I am using "typeface" to mean the design of the glyphs, and "font" when referring to the complete implementation typically found in a font file (covering the typeface, character repertoire, ligature support, styles, sizes, hints etc). In CSS terms, the "typeface" is specified using the font-family property, and other font-* and text-* properties control everything else.

I am sure it's about the font. It's just the design is not appealing!

Aesthetically I prefer Helvetica to Arial (most normal people can't tell the difference). That, however, is a largely subjective opinion, and considered more objectively, a good implementation of Arial is better than a bad one of Helvetica.

When I started at my current client I was disturbed by just how bad APEX apps looked on the Windows PC I was given. Text appeared blocky and blurred. Worse still, character sizes were randomly uneven, jiggling up and down along a line. At home on my MacBook the text on the same apps and pages was clear, crisp, and even. (Coincidentally I noticed an example of this today on some screenshots in a post by Scott Wesley: note the distorted letters in the second image.)

I finally discovered that this was caused by the font stack in the APEX Universal Theme:

font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;

"Helvetica Neue" was the preferred typeface, and as a former Mac OS system font it was highly optimized and looked great on the MacBook. Unfortunately there was a bad implementation of "Helvetica Neue" lurking on the PC. It looked OK when printed, but terrible on the screen. It's possible that you may be experiencing a similar problem. We'll find out when we know exactly what font is being used in your browser.

Eliminating issues of this kind may be the reason behind the change to the font stack made in UT 1.3. It is now:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

This set-up means that users may not see apps appearing exactly as the designer envisaged, but they will be less prone to having their experience degraded by the existence of rogue fonts.