top of page

Use Custom font in Lightning Component

Updated: May 16, 2020

This article is for adding a custom font in lightning component as a static resource.

1. The very first step is to download the font file (single or zip file). Once you have successfully downloaded the font file. Upload it as a static resource. Follow the below step to create a static resource.

for example download Indie Fonts from googlefonts (

It will download a zip, so extract its content and upload file 'IndieFlower-Regular' to your org's static resource as follows.

2. The second and final step is to use this font file in your lightning component.

Open .css file of your lightning component and paste following code.

@font-face tag will import font file in to your lightning component. in this example I am setting whole page font 'IndieFlower'.


output ->

3,272 views1 comment

1 Comment

Sridhar NareshIT
Sridhar NareshIT
Sep 02, 2023

Thanks for posting this , I have been searching for this from long time in Lightning Component

bottom of page