How to Use Custom Font In Lightning Component Using Static Resource

Hi Guys, Today in this post we are going to learn about how to use custom font in salesforce lightning component by static resource.

Step 1 : Download and Upload Custom font in Static Resource. 

you can download custom font (free/paid) from various web resources and the upload your custom font as a zip file or single file in static resources.

1001 free custom fonts download here..

For this post we will use custom Freeware “Dan’s Disney” font.

• After successfully download custom font now we will upload it as a static resources.
• For upload font file (.ttf), from Setup, enter Static Resources in the Quick Find box, then select Static Resources, and click New.
• In the Name field, enter the name which is use in lightning component. [i.e: disneyFont]
• Click Choose File or Browse. , and select custom font file (.ttf) you downloaded before. [after extract from zip file]
• In the Cache Control drop-down list, select Public.
• Click on the Save button.

Step 2 : Use Custom Font In Lightning Component 

After Upload Custom Font file in Static Resource, Now time to use it in the lightning component, we are using CSS3 @font-face property for use custom font in component.

From developer console >> file >> new >> Lightning Component

testFont.cmp [lightning component]

<aura:component >
    <p>Welcome to the Disney Land</p>
    <p>Custom Disney Land font</p>
    <p>How to use custom font in salesforce Lightning</p>
    <p>Like sfdc monkey.com On Facebook</p>
    <p>Welcome to the Disney Land</p>
    <p>Welcome to the Disney Land</p>
</aura:component>

testFont.css [lightning component CSS tab]

p.THIS {
    font-family: 'customfontDisney';
    font-size: 40px;
 }

 @font-face {
   font-family: 'customfontDisney';
   src: url(/resource/disneyFont); 
    /* 
     'disneyFont' is the name of static resorces (.ttf) font file 
    */
 }

From developer console >> file >> new >> Lightning Application

demo.app [Lightning Application]

<aura:application>
<c:testFont/>
<!-- here c: is org. default namespace prefix-->
</aura:application>

Output :

Browser Support : 

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box 🙂