3 Different Ways to Embed Custom Fonts in AEM Sites

AEM Client Libraries
briankasingli

3 Different Ways to Embed Custom Fonts in AEM Sites

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

  1. Embed Custom Font using Google Fonts, CDN
  2. Embed Custom Font using Adobe Fonts, CDN
  3. Embed Font via AEM Client Library Static Asset
Importing fonts from other services such as Google Fonts or Adobe fonts could also result in data-privacy issues and may not be compliant with GDPR policy. For example, an organization, they have received a warning from their data security team, resulting in them hosting fonts on AEM itself.

Do your own diligence and find what’s the right solution for your organization.

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. Utilizing 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 dependent 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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style type="text/css">

  @import URL("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;1,100&display=swap");

  div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, font, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td, .tab-item, input,
  button, select, textarea {
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    font-weight: 300;
  }
</style>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style type="text/css">

  @import URL("https://use.typekit.net/mqs3rg.css");

  div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, font, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td, .tab-item, input,
  button, select, textarea {
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    font-weight: 300;
  }
</style>



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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<style type="text/css">
  @font-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;
  }

  @font-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;
  }

  @font-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;
  }

  div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, font, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td, .tab-item, input,
  button, select, textarea {
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    font-weight: 300;
}
</style>




Hello, I am an enthusiastic Adobe Community Advisor and a seasoned Lead AEM Developer. I am currently serving as an AEM Technical Lead at MNPDigital.ca, bringing over a decade of extensive web engineering experience and more than eight years of practical AEM experience to the table. My goal is to give back to the AEM Full Stack Development community by sharing my wealth of knowledge with others. You can connect with me on LinkedIn.
Website https://www.linkedin.com/in/briankasingli

One thought on “3 Different Ways to Embed Custom Fonts in AEM Sites”

Leave a Reply

Your email address will not be published. Required fields are marked *


Related Posts

Back To Top