10 Replies Latest reply on Mar 28, 2018 4:37 PM by manningda

    APEX 5.x Font Customizations

    manningda

      I am trying to change my font-family as part of my page customization.

       

       

      From the Chrome Developer Tools the only choices are:

      -webkit-body

      -webkit-pictograph

      cursive

      fantasy

      inherit

      monospace

      sans-serif

      serif

      unset

       

       

      I attempted to expand these choices using this guidance:

      https://spendolini.blogspot.com/2015/10/universal-theme-face-lift.html

       

       

      However when I add

       

       

      <link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">

       

       

      To the theme Cascading Style Sheet seciton, my CSS call to the font does not change:

      ex:  font-family: {'Montez', cursive;}

       

       

       

       

      1. Is it possible to customize fonts beyond the APEX platform defaults?

       

       

      2. If so can someone point me toward the correct documentation explaining how?

        • 1. Re: APEX 5.x Font Customizations
          Pierre Yotti

          Where do you add that font links? You Should add it in shared component. Please read the blog correctly

           

          Screenshot_20180327-203813.png

          • 2. Re: APEX 5.x Font Customizations
            manningda

            Alli:

             

             

            Thank you for your notes, however your impatience is a bit off-putting.

             

             

            I did place the reference in the Shared Components as indicated by the blog.  In my original question I specifically referenced the "Cascading Style Sheet" section to indicate that.  Please read my question fully.

             

            In point of fact, I attempted the add to the Universal Theme-42 component as well as a custom template I have also been applying to the page.

            The reference is not making the font family available at run-time from either reference.

             

             

            However you do make a fair clarification further in your post.

             

             

            I am attempting to reference the font-style from the Chrome developer tools as I test the CSS changes in the run-time environment before I add the changes to the application pages.

             

             

            I see that you are indicating it should be referenced from the theme-roller.

            My impression was that the run-time env should allow all references to be reviewed in the run-time windows as a testing-ground.  I will try referencing from the theme roller and see if that changes the results.

            • 3. Re: APEX 5.x Font Customizations
              Pierre Yotti

              Hi, OK. You are right. If is not working, you could try to upload the File in Apex in Static File and linking as intern file path. Regards Pierre

              • 4. Re: APEX 5.x Font Customizations
                fac586

                manningda wrote:

                 

                I am trying to change my font-family as part of my page customization.

                 

                 

                From the Chrome Developer Tools the only choices are:

                -webkit-body

                -webkit-pictograph

                cursive

                fantasy

                inherit

                monospace

                sans-serif

                serif

                unset

                 

                 

                I attempted to expand these choices using this guidance:

                https://spendolini.blogspot.com/2015/10/universal-theme-face-lift.html

                 

                 

                However when I add

                 

                 

                <link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">

                 

                 

                To the theme Cascading Style Sheet seciton, my CSS call to the font does not change:

                Why are you modifying the theme settings? As it says in the article, one of the design goals is to "...change it up without making any changes to the Universal Theme itself, so that when we upgrade to APEX 5.1, our changes will be preserved".

                 

                Consequently, the instructions given do not involve unsubscribing the Universal Theme, which is necessary in order to be able to modify the theme CSS File URLs. (Also note that in all APEX File URLs properties, "You do not need to include opening or closing link tags. Just include the file URL.")

                 

                The article instead suggests adding the customisation using the application's UI properties:

                First, edit your application’s Shared Components and navigate to User Interface Attributes and edit the DESKTOP UI.  In the Cascading Style Sheets section, paste the URL that you copied from Step 3 of the Google Fonts page into the File URLs region.

                 

                ex: font-family: {'Montez', cursive;}

                That is invalid CSS. Compare with the rule supplied in Scott's article:

                 

                body {
                  font-family: 'Montserrat', sans-serif;
                  font-weight: 300;
                  line-height: 25px;
                  font-size: 14px;
                }
                

                 

                1. Is it possible to customize fonts beyond the APEX platform defaults?

                Yes.

                2. If so can someone point me toward the correct documentation explaining how?

                The linked article works perfectly for me. I followed the instructions given and had a custom font working in 2 minutes.

                • 5. Re: APEX 5.x Font Customizations
                  fac586

                  manningda wrote:

                   

                  I did place the reference in the Shared Components as indicated by the blog. In my original question I specifically referenced the "Cascading Style Sheet" section to indicate that. Please read my question fully.

                   

                  In point of fact, I attempted the add to the Universal Theme-42 component as well as a custom template I have also been applying to the page.

                  The reference is not making the font family available at run-time from either reference.

                   

                   

                  However you do make a fair clarification further in your post.

                   

                   

                  I am attempting to reference the font-style from the Chrome developer tools as I test the CSS changes in the run-time environment before I add the changes to the application pages.

                   

                   

                  I see that you are indicating it should be referenced from the theme-roller.

                  My impression was that the run-time env should allow all references to be reviewed in the run-time windows as a testing-ground. I will try referencing from the theme roller and see if that changes the results.

                  Only if the relevant resources are available in the page. As discussed above, the

                   

                  <link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">

                   

                  is invalid in APEX File URLs properties. Please read the online help for these attributes, which for once is comprehensive and informative.

                  • 6. Re: APEX 5.x Font Customizations
                    manningda

                    Apologies, there are a couple of errors in how I phrased my question however I believe I am following the blog instructions correctly.

                     

                    I will try to clarify.

                     

                    "Why are you modifying the theme settings?"

                    I am not actually modifying the Universal Theme and should not have said so.  I made an error in crossing the User Interface Attributes, the Themes, and my custom CR template in my mind while looking at the Shared Components: User Interface selections while I typed.

                     

                     

                     

                     

                     

                     

                    When I run my application page with the "default" Shared Component settings in place and inspect the <head> section of the page the following is listed as an available link from GoogleFonts:

                     

                    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700&subset=cyrillic" rel="stylesheet">

                     

                     

                    Next I have added the link reference to the following locations (alternatively as part of the testing):

                     

                    Shared Components: User Interface Attributes: Cascading Stylesheets

                    Shared Components: Templates: MyCustomCRTemplate: Cascading Stylesheets

                     

                    In both cases when I apply changes and inspect the <head> section again the following is not listed:

                     

                    <link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">

                     

                     

                    Likewise if I use the developer tools to test font changes in the run-time (where span.listElement{} indicates a custom class within the custom template):

                     

                    EX: span.listElement{font-family: 'Montez', cursive;}

                     

                    ...the displayed font does not change to match the expected style referenced at googleapis.

                     

                    However each of the following does produce a visable page change:

                    EX:

                    span.listElement{font-family: cursive;}

                    span.listElement{font-family: fantasy;}

                    span.listElement{font-size: 2em;}

                     

                     

                    I am concluding that my addition of the link reference is not loading to the page at run-time.

                     

                    If the googleapi call is added to [Shared Components: User Interface Attributes: Cascading Stylesheets] shouldn't it be a reference in the page <head> at runtime?

                     

                    Earlier discussion-tensions aside I am quite glad to receive any suggestions or corrections where I may be making an error, however I feel it fair to hope they are in the community spirit that is typical of most of the guidance I have come to expect from these discussions.

                     

                     

                    Continued thanks,

                    • 7. Re: APEX 5.x Font Customizations
                      fac586

                      manningda wrote:

                       

                      Apologies, there are a couple of errors in how I phrased my question however I believe I am following the blog instructions correctly.

                       

                      I will try to clarify.

                       

                      "Why are you modifying the theme settings?"

                      I am not actually modifying the Universal Theme and should not have said so. I made an error in crossing the User Interface Attributes, the Themes, and my custom CR template in my mind while looking at the Shared Components: User Interface selections while I typed.

                       

                       

                       

                       

                       

                       

                      When I run my application page with the "default" Shared Component settings in place and inspect the <head> section of the page the following is listed as an available link from GoogleFonts:

                       

                      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700&subset=cyrillic" rel="stylesheet">

                       

                       

                      Next I have added the link reference to the following locations (alternatively as part of the testing):

                       

                      Shared Components: User Interface Attributes: Cascading Stylesheets

                      That's not the right place. Careful attention to the instructions in the article is required here:

                      First, edit your application’s Shared Components and navigate to User Interface Attributes and edit the DESKTOP UI.  In the Cascading Style Sheets section, paste the URL that you copied from Step 3 of the Google Fonts page into the File URLs region.

                      Click on the edit button for the listed Desktop UI, and add the font CSS URL in the CSS File URLs there.

                       

                      Shared Components: Templates: MyCustomCRTemplate: Cascading Stylesheets

                      Exactly what is being entered where?

                       

                      Earlier discussion-tensions aside I am quite glad to receive any suggestions or corrections where I may be making an error, however I feel it fair to hope they are in the community spirit that is typical of most of the guidance I have come to expect from these discussions.

                      The best way to get fast and effective assistance with problems like this is to create a demonstration app in a workspace on apex.oracle.com and share guest developer credentials here. Then we can see exactly what you are doing.

                      • 8. Re: APEX 5.x Font Customizations
                        manningda

                        I will consider adding the app to the oracle.com however that is not ideal for this current testing environment and likely will not be achievable.

                         

                         

                        I am reading your guidance and the blog instructions carefully but it seems as if the same instruction is being repeated and confirmed here.

                         

                         

                        Blog Instruction:

                         

                        Your Instruction:

                         

                         

                        My Execution:

                        1. Review Page-Level Shared Components.

                        Selection: "User Interface Attributes" is not found:

                         

                         

                        2. Review Application-Level Shared Components:

                         

                         

                         

                        3. Review "USER INTERFACE ATTRIBUTES" as indicated in blog and this thread:

                         

                         

                         

                        4. Edit Desktop UI as indicated in blog and this thread:

                         

                         

                        5. Add googleapis reference and apply changes:

                         

                         

                        6. Review runtime env:

                         

                         

                         

                        7. Review <head> section:

                         

                         

                        The <link> tag is not present in the runtime for the Montez font-family and consequently CSS calls to the font do not succeed.

                         

                         

                        Is there another location for Desktop UI CSS calls that I am still overlooking?

                        • 9. Re: APEX 5.x Font Customizations
                          fac586

                          manningda wrote:

                           

                          I will consider adding the app to the oracle.com however that is not ideal for this current testing environment and likely will not be achievable.

                           

                           

                          I am reading your guidance and the blog instructions carefully but it seems as if the same instruction is being repeated and confirmed here.

                           

                           

                          Blog Instruction:

                           

                          Your Instruction:

                           

                           

                           

                          5. Add googleapis reference and apply changes:

                          As explained (twice) upthread: in APEX File URLs properties, do not include opening or closing link tags, only specify the file URL.

                           

                          Please read the online help for these attributes, which unlike that for many properties is comprehensive and informative.

                          • 10. Re: APEX 5.x Font Customizations
                            manningda

                            Thank you for helping me find my error in the syntax I was copying directly from GOOGLEAPIS.

                             

                            You are correct, I was leaving the full tag syntax in place on the copy to the [Cascading Style Sheet] section of the [User Interface Details].

                             

                            I made the error not only as a result of reading Scott's blog too quickly but also after all previous guidance has been to add HTML/CSS customization in full HTML syntax.  I was expecting the platform to continue to expect HTML syntax in this customization as well.

                             

                            Thank you for continuing the discussion while my root error was clarified.

                             

                            A positive and encouraging environment for questions and errors is an invaluable part of every learning experience.