function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jason SchroederJason Schroeder 

Can I change my font on my VisualForce Page?

I would like to increase the size of the font and the font style. The sales staff have asked if this is possible? This page is something I borrowed from a lot of posts by many of the developers. 

here is my page code.

<apex:page standardController="Account" showHeader="True" sidebar="false" tabStyle="Account" >
      <style>
      .activeTab {background-color: #236FBD; color:white; 
         background-image:none}
      .inactiveTab { background-color: lightgrey; color:black; 
         background-image:none}
        </style>
   <apex:tabPanel switchType="client" selectedTab="tabdetails" 
                  id="AccountTabPanel" tabClass="activeTab" 
                  inactiveTabClass="inactiveTab">
       <apex:tab label="Account" name="Account" id="tabaccount">
       <apex:detail id="account"/>
       </apex:tab>
      <apex:tab label="Reservation" name="Reservation" id="tabOpp">
         <apex:relatedList subject="{!account}" list="opportunities" />
      </apex:tab>
      <apex:tab label="Open Activities" name="OpenActivities" id="tabOpenAct">
         <apex:relatedList subject="{!account}" list="OpenActivities" />
         </apex:tab>
         <apex:tab Label="Contract" name="Contract" id="tabContractAct">
         <apex:relatedList subject="{!account}" list="Contracts"/>
      </apex:tab>
     </apex:tabPanel>
</apex:page>
Best Answer chosen by Jason Schroeder
Vishnu VaishnavVishnu Vaishnav
Hi Jason,

Here is modified code..
============================================================================
<apex:page standardController="Account" showHeader="True" sidebar="false" tabStyle="Account" >
<style>
  .activeTab
   {
       background-color: #236FBD;
       color:white; 
       background-image:none;
   }
   
  .inactiveTab 
   {
       background-color: lightgrey; color:black; 
       background-image:none;
   }
   .rich-tabpanel-content {
        font-size: 14px;
    }
</style>
   <apex:tabPanel switchType="client" selectedTab="tabdetails" 
                  id="AccountTabPanel" tabClass="activeTab" 
                  inactiveTabClass="inactiveTab">
       <apex:tab label="Account" name="Account" id="tabaccount">
           <apex:detail id="account"/>
       </apex:tab>
       <apex:tab label="Reservation" name="Reservation" id="tabOpp">
             <apex:relatedList subject="{!account}" list="opportunities" />
       </apex:tab>
       <apex:tab label="Open Activities" name="OpenActivities" id="tabOpenAct">
             <apex:relatedList subject="{!account}" list="OpenActivities" />
       </apex:tab>
       <apex:tab Label="Contract" name="Contract" id="tabContractAct">
             <apex:relatedList subject="{!account}" list="Contracts"/>
       </apex:tab>
   </apex:tabPanel>
</apex:page>
:::======================================================================:::
Qusetion Solved ? then mark as best answer to make helpful to others .....
For more discussion you can reach out here:
vishnukumarramawat@gmail.com

All Answers

Jason SchroederJason Schroeder
Sorry, let me be more clear!

I want to change the font in the tabPanel.
Vishnu VaishnavVishnu Vaishnav
Hi Jason,

Here is modified code..
============================================================================
<apex:page standardController="Account" showHeader="True" sidebar="false" tabStyle="Account" >
<style>
  .activeTab
   {
       background-color: #236FBD;
       color:white; 
       background-image:none;
   }
   
  .inactiveTab 
   {
       background-color: lightgrey; color:black; 
       background-image:none;
   }
   .rich-tabpanel-content {
        font-size: 14px;
    }
</style>
   <apex:tabPanel switchType="client" selectedTab="tabdetails" 
                  id="AccountTabPanel" tabClass="activeTab" 
                  inactiveTabClass="inactiveTab">
       <apex:tab label="Account" name="Account" id="tabaccount">
           <apex:detail id="account"/>
       </apex:tab>
       <apex:tab label="Reservation" name="Reservation" id="tabOpp">
             <apex:relatedList subject="{!account}" list="opportunities" />
       </apex:tab>
       <apex:tab label="Open Activities" name="OpenActivities" id="tabOpenAct">
             <apex:relatedList subject="{!account}" list="OpenActivities" />
       </apex:tab>
       <apex:tab Label="Contract" name="Contract" id="tabContractAct">
             <apex:relatedList subject="{!account}" list="Contracts"/>
       </apex:tab>
   </apex:tabPanel>
</apex:page>
:::======================================================================:::
Qusetion Solved ? then mark as best answer to make helpful to others .....
For more discussion you can reach out here:
vishnukumarramawat@gmail.com
This was selected as the best answer
Vishnu VaishnavVishnu Vaishnav
Hi Jason,

Here is modified code..

<apex:page standardController="Account" showHeader="True" sidebar="false" tabStyle="Account" >
<style>
  .activeTab
   {
       background-color: #236FBD;
       color:white; 
       background-image:none;
   }
   
  .inactiveTab 
   {
       background-color: lightgrey; color:black; 
       background-image:none;
   }
   .rich-tabpanel-content {
        font-size: 14px;
    }
    .rich-tab-active {
        font-size: 15px;
    }
    .rich-tab-inactive {
        font-size: 15px;
    }
    
</style>
   <apex:tabPanel switchType="client" selectedTab="tabdetails" 
                  id="AccountTabPanel" tabClass="activeTab" 
                  inactiveTabClass="inactiveTab">
       <apex:tab label="Account" name="Account" id="tabaccount">
           <apex:detail id="account"/>
       </apex:tab>
       <apex:tab label="Reservation" name="Reservation" id="tabOpp">
             <apex:relatedList subject="{!account}" list="opportunities" />
       </apex:tab>
       <apex:tab label="Open Activities" name="OpenActivities" id="tabOpenAct">
             <apex:relatedList subject="{!account}" list="OpenActivities" />
       </apex:tab>
       <apex:tab Label="Contract" name="Contract" id="tabContractAct">
             <apex:relatedList subject="{!account}" list="Contracts"/>
       </apex:tab>
   </apex:tabPanel>
</apex:page>

Solved ?....
Jason SchroederJason Schroeder
This Page is working great! I do have one question in relation to the page, can the information be forced to update/refresh when switching from tab to tab?