9 Replies Latest reply on Jan 16, 2020 5:43 PM by fac586

    How to change Universal Theme's font-family?

    Eslam_Elbyaly

      Hello,

      Apex 18.2.

       

      I am using universal theme and I want to change font-family for everything in the app. Everything.

        • 1. Re: How to change Universal Theme's font?
          fac586

          Eslam_Elbyaly wrote:

           

          Apex 18.2.

           

          I am using universal theme and I want to change font for everything in the app. Everything.

          What exactly do you mean by "font"? There are a lot of font properties...

          • 2. Re: How to change Universal Theme's font?
            Eslam_Elbyaly

            fac586 wrote:

            What exactly do you mean by "font"? There are a lot of font properties...

            font-family. I want to change it to Times new roman.

            - Will I have to add the generic family name so that the browser could pick up another font if it doesn't support the one I set?

            - My app direction is right-to-left and it's in Arabic language.

            • 3. Re: How to change Universal Theme's font?
              fac586

              Eslam_Elbyaly wrote:

               

              font-family. I want to change it to Times new roman.

              The simplest way to make minor modifications to the Universal Theme is using the Custom CSS section of the Theme Roller. Add the following rule to override the default font settings:

               

              body { 
                font-family: "Times New Roman", serif; 
              }
              

               

              The font family set on the body element should be inherited by all of the other content and APEX components.

              - Will I have to add the generic family name so that the browser could pick up another font if it doesn't support the one I set?

              Yes, you should always include at least one generic family name when setting a font family to give the browser an appropriate fallback choice if the specified face is not available.

              - My app direction is right-to-left and it's in Arabic language.

              I know nothing about Arabic typography, but Times New Roman would be considered a terrible choice of typeface for web app use with the Latin alphabet. Can you explain why you are opting for that?

              • 4. Re: How to change Universal Theme's font?
                Eslam_Elbyaly

                fac586 wrote:

                Can you explain why you are opting for that?

                The default font does not look that good. It's not necessarily be Times New Roman. Any good looking Arabic font will do the job.

                - 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?

                • 5. Re: How to change Universal Theme's font?
                  fac586

                  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:

                      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?

                  1 person found this helpful
                  • 6. Re: How to change Universal Theme's font?
                    Eslam_Elbyaly

                     

                    fac586 wrote:

                     

                    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?

                     

                    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?

                    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?

                     

                    - 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?

                    • 7. Re: How to change Universal Theme's font-family?
                      fac586

                      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.

                      1 person found this helpful
                      • 8. Re: How to change Universal Theme's font-family?
                        Eslam_Elbyaly

                        fac586 wrote:

                        We'll find out when we know exactly what font is being used in your

                        Segoe UI.

                        • 9. Re: How to change Universal Theme's font-family?
                          fac586

                          Eslam_Elbyaly wrote:

                           

                          fac586 wrote:

                          We'll find out when we know exactly what font is being used in your

                          Segoe UI.

                          Right. So it would seem to be an aesthetic rather than a technical matter, and you are now in the market for a "good looking Arabic font". I can't help any further with that...

                           

                          From my untutored viewing of Segoe UI Arabic, is it the uniform stroke width that doesn't appeal? Not as "calligraphic" as more traditional Arabic text?