Using Custom Fonts In Lightning Components

Hello There! Welcome Back 🙂
Hope you are doing great 😀

Today we will be learning how to use custom fonts in Lightning Components.
The video below explains the process.

CSS is used to customize font with the help of a CSS rule @font-face
@font-face uses two main attributes:

  1. font-family: Name of the font to to reference the custom font
  2. src: The location of the font file
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes">
	<p class="customFont">This is a custom font in Lightning Components</p>
</aura:component>
.THIS{
}

.THIS.customFont{
    font-family: 'Satisfy', cursive;
    color: #0070D2;
    font-size: 1.75rem;
}

@font-face {
  font-family: 'Satisfy';
  font-style: normal;
  font-weight: 400;
  src: local('Satisfy'), url(https://fonts.gstatic.com/s/satisfy/v6/0EcI1zXfvSXoNHQChcRmRwLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

That is it! We learnt how to Use Custom Fonts in Lightning Components.
Awesome, Right?

If you like the content, give it some sharing 🙂

Happy Coding 😀
For more Salesforce Dev Content, Please Like & Subscribe to My Facebook Page and Youtube Channel with the links below.
Thank you, See you in the next one & Peace 😀


Stay update with our latest posts by subscribing to our newsletter. It is free!




Leave a Reply

Your email address will not be published.