You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

​Custom Font in Lightning Component Using Static Resource


By: Venkata

Introduction 

We can now use custom font in Salesforce lightning component by static resource. This is helpful to design the page or lightning app with custom font to give better feel to the user.

Custom font in Static Resource 

Download any custom font from web resources and then upload the custom font as a zip file or single .ttf file in static resource. Select “Public” in cache control drop down list.

Use Custom Font in Lightning Component

After uploading custom font in static resource, now we can use it in Lightning Component. Use CSS3 @font-face property for using custom font in Lightning App.

Using developer console, go to

File -> new -> Lightning Component

lightning custom font

customFont.cmp

lightning custom font

Click Style tab and add the CSS

customFont.css

Give the name of the font in font-family to reference the custom font.

Src: We can either download and add reference from the static resource or can get the font-face CSS from the google font and paste it in the component style.

lightning custom font

Redirect to the google font link, copy and paste the font-face code in style.

Custom Font Lightning Component in Page/App

Go to File -> New -> Lightning Application and add the component tag as

Or component can be included in the record page.

Salesforce Lightning

Web References  

http://www.sfdcmonkey.com/2017/06/22/custom-font-lightning-component-static-resource/

https://salesforce.stackexchange.com/questions/177647/include-custom-font-in-lightning-components

https://fonts.google.com/