Use Custom font in Lightning Component

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