custom font in salesforce lightning component

How to Use Custom Font In Lightning Component Using Static Resource

Lightning Component

Sharing is caring!

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]

testFont.css [lightning component CSS tab]

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

demo.app [Lightning Application]

Output :

custom font in salesforce lightning component

Browser Support : 
custom font in salesforce lightning component
Source: W3schools.com

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 🙂

Sharing is caring!

(Visited 1,275 times, 1 visits today)

Leave a Reply