Custom font in Visualforce Page

We can use custom fonts in the Visualforce page using Salesforce Static Resources. Following are the steps to use custom fonts:

Custom font in Visualforce Page

1. In Setup, use the Quick Find box to find Static Resources and create new a resource with ZIP of the font file as given below:

1. Create a css file micrStyle.css with the following code:
   @font-face {
font-family: "micr";
src: url('{!URLFOR($Resource.micr, 'micr.ttf')}') format('truetype');
}
body {
font-family: micr;
}
2. Create a resource for micrStyle.css as given below:

1. Use the above CSS static resource in your VF page code as given below:
   <!-- Static Resources for CSS -->
<apex:styleSheet value="{!URLFOR($Resource.micrStyle,micrStyle.css')}"/>

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Originally published at https://blog.webnersolutions.com on January 7, 2022.