Font Faces | Community
Skip to main content
J
JustinBr17
Level 3
November 4, 2022

Font Faces

  • November 4, 2022
  • 2 replies
  • 1094 views

Hi,

 

I am trying to change the font face to some of the fonts we use. Right now this is how my code looks: 

<font jcr:primaryType="nt:unstructured" faces="[overpass,serif,sans-serif,monospace]" features="*" sizes="[-2,-1,+1,+2,+3,+4]"/>

 

overpass, serif, sans-serif, monospace all works when I deploy in to AEM. But when I try to add fonts like future, gothic, stratum, and louis the fonts wont work or change. 

 

Thank you

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

2 replies

Jineet_Vora
Community Advisor and Adobe Champion
Jineet_VoraCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
November 4, 2022

Hi @justinbr17, please be aware that <font> element was used in HTML4 and now has been removed from HTML5 so would suggest not to use it anymore (check here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font)

The correct way to use custom fonts is as shown below:
Embed Font via AEM Client Library Static Asset - https://sourcedcode.com/blog/aem/3-different-ways-to-embed-custom-fonts-in-aem-sites#embed-custom-font-static-asset

 

Hope this helps!

Jineet

    J
    JustinBr17Author
    Level 3
    November 14, 2022

    Hi @jineet_vora how can I update the font sizes. Instead of using numbers from 1 to 7, I would like to use the fonts sizes similar to Microsoft font sizes for example 8, 9, 10, 12, 14, 16...etc.

     

    Thank you

      C
      clarajack63423
      May 11, 2023

      Hey @jineet_vora , If I somehow managed to keep on utilizing the <font> component, how might I add new text styles. I have taken a stab at introducing various textual styles and afterward adding them, however they actually don't work. For instance, I attempted introduce the text style "roboto" however when I carry out it, the text style still doesnt show.

      Anchor Fonts

      Terms & ConditionsAccessibility statement

      Loading footer...