Using Custom Fonts In Lightning Aura Components

Using Custom Fonts In Lightning Aura Components

Raghavendhra Yarlagadda's photo
Raghavendhra Yarlagadda
·

1 min read

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.

https://www.youtube.com/watch?v=rCE_JVw2jjk

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

CustomFont.cpm

<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>

CustomFont.css

.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?

CSSSalesforce