Hi Guys, Today in this post we are going to learn about how to use custom font in salesforce lightning component by static resource.
Step 1 : Download and Upload Custom font in Static Resource.
you can download custom font (free/paid) from various web resources and the upload your custom font as a zip file or single file in static resources.
For this post we will use custom Freeware “Dan’s Disney” font.
- After successfully download custom font now we will upload it as a static resources.
- For upload font file (.ttf), from Setup, enter Static Resources in the Quick Find box, then select Static Resources, and click New.
- In the Name field, enter the name which is use in lightning component. [i.e: disneyFont]
- Click Choose File or Browse. , and select custom font file (.ttf) you downloaded before. [after extract from zip file]
- In the Cache Control drop-down list, select Public.
- Click on the Save button.
Step 2 : Use Custom Font In Lightning Component
After Upload Custom Font file in Static Resource, Now time to use it in the lightning component, we are using CSS3 @font-face property for use custom font in component.
From developer console >> file >> new >> Lightning Component
testFont.cmp [lightning component]
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<aura:component > <p>Welcome to the Disney Land</p> <p>Custom Disney Land font</p> <p>How to use custom font in salesforce Lightning</p> <p>Like sfdc monkey.com On Facebook</p> <p>Welcome to the Disney Land</p> <p>Welcome to the Disney Land</p> </aura:component> |
testFont.css [lightning component CSS tab]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
p.THIS { font-family: 'customfontDisney'; font-size: 40px; } @font-face { font-family: 'customfontDisney'; src: url(/resource/disneyFont); /* 'disneyFont' is the name of static resorces (.ttf) font file */ } |
From developer console >> file >> new >> Lightning Application
demo.app [Lightning Application]
|
1 2 3 4 5 6 7 8 |
<aura:application> <c:testFont/> <!-- here c: is org. default namespace prefix--> </aura:application> |
Output :
Browser Support :
Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.
if you have any suggestions or issue with it, you can post in comment box 🙂
can we use .scss as static resource??