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 :

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 🙂