+ Start a Discussion
Alex Waddell 17Alex Waddell 17 

How to make font size smaller on my VF page - Rendered as PDF

Hello,

I need to make the font size smaller on my page. I have the following styling on the page but when i change the font-size from 12 to 8 nothing happens.
body {
                font-family: sans-serif;
                font-size:12px;
                }
I want to be able to make the font on the entire page a few sizes smaller, below is my entire block of code
 
<apex:page standardController="Correspondence__c" renderAs="pdf" >
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
            <style type="text/css">
                body {
                font-family: sans-serif;
                font-size:12px;
                }
              mybox {
    				width: 320px;
					height:100px;
                    padding: 10px;
                    background-color: lightblue;
                    border: 2px solid gray;
                    margin: 0; 
					} 
               
            </style>      
        </head>    
        <body>   
            <table cellpadding="6" width="100%">
                <tr>
                    <td>
                        <apex:outputPanel >
                            <apex:image url="/servlet/servlet.FileDownload?file=0151D0000005bAO" width="150" Height="75"/>
                        </apex:outputPanel>
                    </td>
                    <td>
                        <apex:outputPanel >
                            Case Information
                        </apex:outputPanel>
                    </td>
                    <td>
                        <apex:outputPanel >
                            Form 2067
                        </apex:outputPanel>
                    </td>    
                </tr>
            </table>  


 <table cellpadding="6" width="70%">
                <tr>
                    <td style="vertical-align: text-top;">
                            To:
				    </td><td>
                        <div class="mybox">
        		<apex:outputField value="{!Correspondence__c.Payer_Name__c}"/><br/>
                <apex:outputField value="{!Correspondence__c.Payer_Fax_Number__c}"/><br/>
										
						</div>
                    </td>
                    <td style="vertical-align: text-top;">                      
                            From:
			       </td><td>
                        <div class="mybox">       			
                Outreach Health Services<br/>
        		251 W Renner Rd, <br/>
        		Richardson, TX 75080 
						</div>
                    </td>
                </tr>
            </table>       
             <table style="width:100%" border="1">


          <tr>
            <td>Case Name
                <br></br>
            <apex:outputField Value="{!Correspondence__c.Case_Name__c}" />
            </td>

            <td>Category <br></br> PERS</td>
            <td>Case No. <br></br> <apex:outputField Value="{!Correspondence__c.Case_No__c}"/></td>
            <td>Category<br></br> &nbsp;  </td>
            <td>Case No.<br></br> &nbsp;  </td>
          </tr>
          <tr width = "100%">
            <td width = "32%"></td>
            <td width = "11%"></td>
            <td width = "11%"> </td>
            <td width = "11%"></td>
            <td width = "15%">
            </td>
          </tr>         

        </table>        
        <table style="width:100%" border="1">


          <tr>

            <td>Address(Street, City, State, ZIP Code)
                <br></br>
            <apex:outputField Value="{!Correspondence__c.Patient_Address__c}"/>
              </td>
            <td>Area Code and Telephone No.
                <br></br>
    <apex:outputField Value="{!Correspondence__c.Payer_Fax_Number__c}"/>   
				</td>
                
            
          </tr>
          <tr width = "100%">
            <td width = "60%"></td>
            <td width = "40%"></td>
          </tr>         

        </table>        
   <b>Please Check all that apply.</b>  
<br></br>
<br></br>
             <table style="width:100%">


          <tr>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td> Absent Parent</td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Change in Address/Telephone</td>  
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Change in Circumstances </td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Child Care</td>  
			<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Community Placement Resources</td>
          </tr>      
          <tr width = "100%">
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
          </tr> 
        </table> 
             <table style="width:100%">
                 
          <tr>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td> Deductions</td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Employment Services</td>  
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>EPSDT </td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Family Health Services Name</td>  
			<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Family Planning</td>
          </tr>       
          <tr width = "100%">
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
          </tr>
        </table> 

             <table style="width:100%">
                 
          <tr>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td> Household Composition</td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Income</td>  
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>LTSS Information Shared </td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Medicaid</td>  
			<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Medical/Disability</td>
          </tr>       
          <tr width = "100%">
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
          </tr>
        </table> 
             <table style="width:100%">
                 
          <tr>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td> MERP Shared</td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Nursing Care/Level of Care</td>  
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Protective Services</td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Refugee Services</td>  
			<td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Resources</td>
          </tr>       
          <tr width = "100%">
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
            <td width = "5%"></td>
            <td width = "15%"></td>
          </tr>
        </table>
             <table style="width:100%">
                 
          <tr>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td> MERP Shared</td>
            <td><apex:outputField Value="{!Correspondence__c.VF_Checkbox__c}"/></td>
            <td>Nursing Care/Level of Care</td>  
            <td><apex:outputField Value="{!Correspondence__c.Other__c}"/></td>
            <td>Other</td>
            <td><apex:outputField Value="{!Correspondence__c.Reason_for_Form__c}"/></td>
          </tr>       
          <tr width = "100%">
            <td width = "4%"></td>
            <td width = "14%"></td>
            <td width = "5%"></td>
            <td width = "14%"></td>
            <td width = "5%"></td>
            <td width = "5%"></td>
            <td width = "60%"></td>
          </tr>
        </table>
        </body>
    </html>
</apex:page>

 
Best Answer chosen by Alex Waddell 17
Raj VakatiRaj Vakati
You need to add style to the body .. some think like below 
 
<body style="font-family: sans-serif;font-size:5pt;">

 

All Answers

Raj VakatiRaj Vakati
You need to add style to the body .. some think like below 
 
<body style="font-family: sans-serif;font-size:5pt;">

 
This was selected as the best answer
Alex Waddell 17Alex Waddell 17
Thank you so much!
 
Howard BryantHoward Bryant
Great , thanks . Use it and I'll get peppa pig font (https://yofonts.com/peppa-pig/)