top of page
Writer's pictureSupriya Bassi

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 (https://fonts.google.com)

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


LightningComponent.cmp


output ->



3,426 views1 comment

1 comentario


Sridhar NareshIT
Sridhar NareshIT
02 sept 2023

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

Me gusta
bottom of page