How to best host fonts in AEM? | Community
Skip to main content
NageshRaja
NageshRaja
Level 5
September 25, 2024
Solved

How to best host fonts in AEM?

  • September 25, 2024
  • 3 replies
  • 2517 views

Hey guys,

 

We received Libre Franklin fonts (.ttf) files which we want to include in our codebase.

I am trying to add them to path - ui.apps/src/main/content/jcr_root/apps/project/clientlibs/clientlib-site/resources but get the below prompt -

 

The following paths are ignored by one of your .gitignore files:
ui.apps/src/main/content/jcr_root/apps/project/clientlibs/clientlib-site
hint: Use -f if you really want to add them.
hint: Turn this message off by running
hint: "git config advice.addIgnoredFile false"

 

Should I change my gitignore config or move it at some other location?

 

Best answer by Rohan_Garg

Hey @nageshraja ,

I think you should place it in ui.frontend module - Give this blog by @imran__khan  a read AEM ui.frontend module Complete Guide
Quoting from the above - 
dist → This contains front end fonts, images and minified version of JS and CSS files. npm run dev build command helps us to move/copy files from ui.frontend/src to ui.frontend/dist and ui.apps folder.


Hope this helps!

3 replies

Rohan_Garg
Community Advisor
Rohan_GargCommunity AdvisorAccepted solution
Community Advisor
September 25, 2024

Hey @nageshraja ,

I think you should place it in ui.frontend module - Give this blog by @imran__khan  a read AEM ui.frontend module Complete Guide
Quoting from the above - 
dist → This contains front end fonts, images and minified version of JS and CSS files. npm run dev build command helps us to move/copy files from ui.frontend/src to ui.frontend/dist and ui.apps folder.


Hope this helps!

    NageshRaja
    NageshRajaAuthor
    Level 5
    September 26, 2024

    thanks @rohan_garg, what is the disadvantage of putting it directly in /apps/project/clientlibs?

      Rohan_Garg
      Community Advisor
      Rohan_GargCommunity Advisor
      Community Advisor
      September 27, 2024

      It will get overridden when ui.frontend files are put in the ui.apps folder.

      aem-clientlib-generator plugin moves all compiled CSS, JS and other resources into the ui.apps module.

        I
        inspect_element
        Level 2
        September 25, 2024

        nice

          BrianKasingli
          Community Advisor and Adobe Champion
          BrianKasingliCommunity Advisor and Adobe Champion
          Community Advisor and Adobe Champion
          September 25, 2024

          In my opinion, best way to embed a custom font for an AEM project is to store web-safe font files directly into a client library; self hosted. The fonts are then referenced by the CSS stylesheet, where the font file paths are the proxied client libraries URI. Using the CSS rule, @2375939-face, we are able to configure custom fonts for an AEM project. Also, serving fonts directly from AEM allows you to apply performance improvements, in caching mechanisms on the browser and CDN.

           

          Once you have added resources into the ui.frontend, the code compilation is expected to export the client library under /apps/sourcedcode/clientlibs/*. From here, ensure that your client library is enabled with allowProxy="{Boolean}true". From here, you should be able to call the proxied paths.


          Usage in ui.frontend .scss files, example:

           

           

           

          @2375939-face { font-family: "Roboto"; src: url("/etc.clientlibs/sourcedcode/clientlibs/clientlib-site/resources/fonts/roboto-bold.otf") format("truetype"); font-style: normal; font-weight: 700; } @2375939-face { font-family: "Roboto"; src: url("/etc.clientlibs/sourcedcode/clientlibs/clientlib-site/resources/fonts/roboto-medium.otf") format("truetype"); font-style: normal; font-weight: 500; } @2375939-face { font-family: "Roboto"; src: url("/etc.clientlibs/sourcedcode/clientlibs/clientlib-site/resources/fonts/roboto-regular.otf") format("truetype"); font-style: normal; font-weight: 300; }

           

           

           

           

          CDN Rules for WOFF (from WKND Project):

           

           

          <LocationMatch "^/etc\.clientlibs/.*\.(?i:js|css|ttf|woff2)$"> Header set Cache-Control "max-age=2592000,stale-while-revalidate=43200,stale-if-error=43200,public,immutable" "expr=%{REQUEST_STATUS} < 400" Header set Age 0 </LocationMatch>

           

           

          https://github.com/adobe/aem-guides-wknd/blob/a5915afb2f48a602bbe8ea24680dd8fe81962198/dispatcher/src/conf.d/available_vhosts/wknd.vhost#L152C5-L155C21

          This configuration uses an <LocationMatch> directive to apply specific HTTP headers for certain file types in the specified path (/etc.clientlibs/). Here’s a summary of what each part does:

          1. LocationMatch: This block applies to URLs that match the regular expression pattern, specifically files with extensions .js, .css, .ttf, or .woff2, case-insensitively.

          2. Header set Cache-Control: This sets caching headers for the matched resources:

            • max-age=2592000: Caches the response for 30 days.
            • stale-while-revalidate=43200: Allows the stale cached response to be served for 12 more hours while fetching a fresh one.
            • stale-if-error=43200: Allows serving the cached response for 12 hours if an error occurs during the fresh fetch.
            • public: Indicates that the response can be cached by any cache.
            • immutable: Suggests that the resources won’t change, allowing for long-term caching.

          3. Header set Age 0: Sets the Age header to 0, indicating that the response is fresh and has not been in cache.

           

          Useful blog articles:

          3 Different Ways to Embed Custom Fonts in AEM Sites - Sourced Code

          How to Serve Static Assets in AEM as Client Library Resources - Sourced Code

          P.S, you can literally clone exactly what the WKND project is doing, as this is the proper way to implement exactly what I have mentioned above: aem-guides-wknd/ui.frontend/src/main/webpack/resources/fonts at main · adobe/aem-guides-wknd · GitHub

            NageshRaja
            NageshRajaAuthor
            Level 5
            September 26, 2024

            hey @briankasingli , thanks for the detailed reply - one query - should I directly place the files in /apps/project/clientlibs or in ui.frontend as @rohan_garg has suggested?

              BrianKasingli
              Community Advisor and Adobe Champion
              BrianKasingliCommunity Advisor and Adobe Champion
              Community Advisor and Adobe Champion
              September 26, 2024

              Hey @nageshraja , its best practice to place resource files into the ui.frontend. Please copy exactly what the WKND project is doing here, and this is the way to do it https://github.com/adobe/aem-guides-wknd/tree/main/ui.frontend/src/main/webpack/resources/fonts



              The disadvantage of hard coding the resources under /apps/my-site/clientlibs/clientlib-site/resources/* is that whenever your code is re-compiling code, then whatever you place in there will be gone... this is because the ui.frontend uses the clientlib-generator, which will re-produce /apps/my-site/clientlibs/clientlib-site on maven build. 

                Terms & ConditionsAccessibility statement

                Loading footer...