3 Different Ways to Embed Custom Fonts in AEM Sites | AEM Community Blog Seeding | Community
Skip to main content
kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
September 24, 2020

3 Different Ways to Embed Custom Fonts in AEM Sites | AEM Community Blog Seeding

  • September 24, 2020
  • 5 replies
  • 7115 views

BlogImage.jpg

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

Abstract

In this article, we will go through three different ways how you can embed custom fonts in an AEM site.

Embed Custom Font using Google Fonts, CDN
Embed Custom Font using Adobe Fonts, CDN
Embed Font via AEM Client Library Static Asset
1. Embed Custom Font using Google Fonts, CDN
Embed a custom font is by using Google Fonts. Google Fonts can be quickly installed into your project by using the @import CSS rule. Utilising the out of the box setup, you are prescribed to Google Font’s CDN. The lifecycle management of the fonts embedded onto your AEM site will be dependant on Google Font’s CDN servers.

There are hundreds of free font’s offered by Google. Simply visit the Google Font’s website to request for which fonts you wish to use on your website. Next obtain the @import CSS configuration that is offered by the webpage.

Embedding font via @import URL:2. Embed Custom Font using Adobe Fonts, CDN Embed a custom font is by using the Adobe Fonts, where fonts can be quickly installed into your project by using the @import CSS rule. After logging into Adobe Font’s, you can create a new project where you can select different fonts from Adobe Font’s collection to be used in your website. Retrieve the “embed code” CDN path from your Adobe Font’s project, and you are well on your way. Adobe Font's Projects Console, with Embed Code Next obtain the @import CSS configuration that is offered by the webpage. Embedding font via @import URL:3. Embed Font via AEM Client Library Static Asset The most common way to embed a custom font for an AEM project is to store web-safe font files directly into a client library. The fonts are then referenced by the CSS stylesheet, where the font file paths are the proxied client libraries URI. Using the CSS rule, @font-face, we are able to configure custom fonts for an AEM project. clientlib-site resources/font folder screenshot For how to Serve Static Assets in AEM as Client Library Resources, click here. Embedding font via @font-face URL:
    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

    5 replies

    S
    SrikanthPo3
    Level 5
    December 1, 2022

    Hi @kautuk_sahni ,

    I have one question, in our application(multi-lingual) we are embedding font via @import URL. We need different font families for Russia, Korea and Japan sites. Right now all font families are loading on all country/language sites. How can we conditionally load font families based for specific countries.

    Below is the import URLs in clientlib css file.

    *:lang(ru-ru){
    @import url('//fonts.googleapis.com/css?family=Noto+Sans:400,400i,700&display=swap');
    }

    *:lang(ko-kr) {
    @import url('//fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');
    }

    *:lang(ja-jp) {
    @import url('//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

      kautuk_sahni
      Community Manager
      kautuk_sahniCommunity ManagerAuthor
      Community Manager
      December 1, 2022

      @srikanthpo3 I have asked the original author to help you here.

      Kautuk Sahni
        BrianKasingli
        Community Advisor and Adobe Champion
        BrianKasingliCommunity Advisor and Adobe Champion
        Community Advisor and Adobe Champion
        December 2, 2022

        @srikanthpo3, you got it. Something like this would work.

        <div lang="en"> <h1>This English quote has a <q>nested</q> quote inside.</h1> </div> <div lang="fr"> <h2>This French quote has a <q>nested</q> quote inside.</h2> </div> <div lang="de"> <h3>This German quote has a <q>nested</q> quote inside.</h3> </div>:lang(en) > h1 { font-family: 'Arial'; color: red; } :lang(fr) > h2 { font-family: 'Times new roman'; color: green; } :lang(de) > h3 { font-family: 'Arial'; color: blue; }

          S
          SrikanthPo3
          Level 5
          December 4, 2022

          Hi @briankasingli ,

          Thanks for the information, but all the fonts load on all sites with above approach, able to see in the browser developer tools sources tab or network tab i.e. from above import URLs, we want below

          Russia site - Noto Sans

          Korea site - Noto Sans KR

          Japan site - Noto Sans JP

          But these fonts load on US site as well. We are looking for a way to avoid loading above fonts on US site.

            sourcedcode
            sourcedcode
            Level 2
            December 4, 2022

            If that’s so, then you can create 3 static client libraries to be invoked, for each region.

              Terms & ConditionsAccessibility statement

              Loading footer...