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:

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:
   
2. 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;
}
3. Create a resource for micrStyle.css as given below:
   
4. 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')}"/>