Skip to main content
T
test1234567
New Participant
July 1, 2022

Issues with loading fonts in AEM

  • July 1, 2022
  • 7 replies
  • 4695 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

    Aditya_Chabuku
    Aditya_Chabuku
    New Participant
    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
      arunpatidar
      arunpatidar
      New Participant
      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
        Jagadeesh_Prakash
        Jagadeesh_Prakash
        New Participant
        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
          New Participant
          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.

            Shubham_borole
            Shubham_borole
            New Participant
            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?

              arunpatidar
              arunpatidar
              New Participant
              July 1, 2022

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

              Arun Patidar
                Mohit_KBansal
                Mohit_KBansal
                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
                  New Participant
                  July 1, 2022

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

                    Pallavi_Shukla_
                    Pallavi_Shukla_
                    New Participant
                    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
                      New Participant
                      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,

                        Terms & ConditionsAccessibility statement

                        Loading footer...