Font Faces

[StrawHatM23]

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

[Jineet_Vora]

Hi @StrawHatM23, 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-fo...

Hope this helps!

Jineet

[StrawHatM23]

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

[StrawHatM23]

Hi @Jineet_Vora , If I were to continue to use the <font> element, how can I add new fonts. I have tried installing different fonts and then adding them, but they still don't work. For example, I tried install the font "roboto" but when I implement it, the font still doesnt show.

Thank you

[clarajack63423]

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