​Custom Font in Lightning Component Using Static Resource

Share on facebook
Share on twitter
Share on linkedin
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. 

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  

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

https://fonts.google.com/

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.