Issues with loading fonts in AEM | Community
Skip to main content
T
test1234567
Level 6
July 1, 2022

Issues with loading fonts in AEM

  • July 1, 2022
  • 7 replies
  • 4689 views

Hello, I have an issue with loading the custom fonts in AEM 6.5.6.0. I have created the resources/fonts folder and kept the custom fonts and also set the allowProxy to access the Clientl-Library which is under /apps/.

 

Below is the entry that I have referenced in my css file.

@2375939-face {

font-display: fallback;

font-family: 'Sun';

font-style: normal;

font-weight: 700;

src: url('/etc.clientlibs/project/clientlibs/clientlib-site/resources/fonts/test.woff2') format('woff2')

}

 

above entries are transformed into a client library entry like regardless of accessing the pages from different folder (content/project/a.html or content/project/test/b.html or content/project/test/version/c.html )

@2375939-face {

    font-display: fallback;

    font-family: Sun;

    font-style: normal;

    font-weight: 700;

    src: url(../../../../etc.clientlibs/project/clientlibs/clientlib-site/resources/fonts/test.woff2) format("woff2"), }

 

 This relative path with ../../../../  added in the prefix, because of this issue, the fonts are not loading. is there a way to address this issue?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    7 replies

    Pallavi_Shukla_
    Community Advisor
    Pallavi_Shukla_Community Advisor
    Community Advisor
    July 1, 2022

    hi @test1234567 

     

    Are you facing issues in the author & publish instance too or it is only limited to dispatcher? 

     

    Thanks,

    Pallavi Shukla

     

     

      T
      test1234567Author
      Level 6
      July 1, 2022

      I am facing this issue in author instance. Basically I am checking if the fonts are loading or not. Because of the incorrect path reference, the fonts are not loading,

        Mohit_KBansal
        Adobe Employee
        Mohit_KBansalAdobe Employee
        Adobe Employee
        July 1, 2022

        Do not use the full path including clientlib path, rather, you should create a resources/fonts folder in your clientlib, and add the relative path of the font in your CSS.

          T
          test1234567Author
          Level 6
          July 1, 2022

          I have already tried with relative path as well but I still see the same issue. 

            arunpatidar
            Community Advisor
            arunpatidarCommunity Advisor
            Community Advisor
            July 1, 2022

            I have seen this issue before, someone else as reported this.

            Arun Patidar
              Shubham_borole
              Community Advisor
              Shubham_boroleCommunity Advisor
              Community Advisor
              July 1, 2022

              I think the clientlibrary entry should also display the path with "/etc.clientlibs/project/..." Can we look into what is transforming this?

              For eg if yo uhave a ui.frontend module probably some clientlib config is transforming that in the actual clientlib css?

                Jagadeesh_Prakash
                Community Advisor
                Jagadeesh_PrakashCommunity Advisor
                Community Advisor
                July 1, 2022

                Hi @test1234567 

                 

                Did you check the fonts loading in the develop tool network tab? 

                If fonts are loading in the network tab and not from the generated minified css. Could be the case that the fonts are not loading the newly generated minified files which normally happens when you try to build from ui.frontend and the minifed files are not getting refered proerly at the page level. 

                 

                  T
                  test1234567Author
                  Level 6
                  July 1, 2022

                  The fonts are not loading in dev tools -> network tab as well. if I access the font file url directly, I am able to download but it is not loading on page load.

                    arunpatidar
                    Community Advisor
                    arunpatidarCommunity Advisor
                    Community Advisor
                    July 4, 2022

                    Hi,

                    I believe something is wrong with your css code

                    Although the issue is valid.

                     

                    I have found a way to fix this

                     


                    @font-face {
                    font-family: 'CustomFont';
                    font-style: normal;
                    font-weight: normal;
                    src: local('CustomFont'), url('../clientlib-site/resources/fonts/Austria.ttf') format('truetype');
                    }
                    body {
                    font-family: 'CustomFont', serif;
                    font-size: 48px;
                    }

                     

                     

                     

                    Arun Patidar
                      Aditya_Chabuku
                      Community Advisor
                      Aditya_ChabukuCommunity Advisor
                      Community Advisor
                      July 5, 2022

                      Hi @test1234567 ,

                       

                      The issue is with references, you are trying to refer along with etc.clientlibs. please give a relative path from your file  location to the clientlib-site folder by removing  ../../../../etc.clientlibs/project/clientlibs. in your src.

                       

                      Also, Please refer to @arunpatidar 's solution below.

                       

                      ~Aditya.Ch

                      Thanks,Aditya Chabuku
                        Terms & ConditionsAccessibility statement

                        Loading footer...