If you ever wanted to change the fonts of your site and aren't sure how to do so, this article will guide you through that. Everyone likes something different in the aspect of style. Read on to learn how to change the font on your site to fit your style and business.


Applies to Version(s): 3.9.0-R1 — 3.9.0-R7


In this article, you will learn:

How to Find the Area You Want to Edit

How to Change the Font for an Area


Steps in changing the font style and size of your site


1. Log in to your cart Admin area.


edit theme

2. Click Front-End > Manage themes > Edit Theme


pinnaclecart typography

3. Then, click Typography.


Under Typography, listed below are the different options available to customize the font styles and sizes of your site. 


Base Font - Set the font style, size, and weight of the body of the site. 

  • Body font 
  • Body font size, rem  
  • Body font weight 


Headings - Set the font style, size, and weight of the different headings of the site. 


typography headings

  • Headings font - Choose the font style you prefer for the headings. You can also add your font by clicking the letter "A" button next to the font name (left image above). A pop-up window will appear (right image above) for you to Add Font or Use the pre-installed fonts on your site. 


  • H1 font size, rem - The target elements of this option are the Product Name on the Product Page, Catalog name on Catalog Page, and Page Header Titles.
  • H1 font weight - Choose the font weight for Heading 1 between Normal and Bold. 


  • H2 font size, rem - The target elements of this option are the Featured Categories Title Header, Featured Products Title Header, Manufacturer Title Header, and Newsletter Title Header found on the Home Page.
  • H2 font weight - Choose the font weight for Heading 2 between Normal and Bold.    


  • H3 font size, rem - The target element of this option is the Manufacturer Page "No Item Found"
  • H3 font weight - Choose the font weight for Heading 3 between Normal and Bold. 


  • H4 font size, rem - The target elements of these options are the Gift Certificate Form Header on Gift Certificate Page, Product Listing Header on Cart Page and Product Page, Loading Message on Checkout Page, Profile Page's Welcome Message, and My Account Edit Forms Header.
  • H4 font weight - Choose the font weight for Heading 4 between Normal and Bold. 


  • H5 font size, rem - The target elements of these options are the Product Name on All Product Listings, Review Title on Product Page, Overview Header on Product Page, and "Leave Password" Notification on My Profile Edit Page.
  • H5 font weight - Choose the font weight for Heading 5 between Normal and Bold.   


  • H6 font size, rem - The target elements of these options are the Product Name on Cart Page and Sub Category Name on Catalog Page.
  • H6 font weight - Choose the font weight for Heading 6 between Normal and Bold. 


Buttons

  • Buttons font - Set the fonts style of the buttons on your site.
  • Buttons font weight - Set the font weight of the buttons on your site to Normal or Bold. 


Links

  • Underline text links - Tick the box if you opt to see linked texts highlighted and underlined.
  • Underline button links - Tick the box if you opt to see the button links highlighted and underlined.


How to change the font for an area


Now we’re in the Styles Editor we can find each area that we want to change, and for our example above we’re changing the Menu. Now I’ll walk you through each of the changes we can make on this screen with the area that we have selected: 


        1. These are directing you to the area that we have just selected when opening. You’re not limited to what you can edit, you can go through different areas of the page and change them as well while you have this open. These are just mainly highlighting what we’re currently demonstrating.


        2. This is where you make the actual changes.


  • Family - The style of your font, you can click here to learn more about Font Families.  This will give your font a life of its own and add more style to your site if you wish
  • Size - This is always important, too small and your customers won’t see what they’re looking at, too big and it spreads your site out and makes it too bulky.
  • Color - Here you can use Html color codes that will give you that specific color you’re looking for. Click here to find out more.
  • Weight - This is something that is like making your text either a heavier or lighter view. For example when you’re using MS Word and you select Bold for your headline. Click here to learn more about Font Weights.
  • Font Style - This is where you can add that Italicize effect to your lettering or make your text inherit.  Click here to learn more about Font Style.
  • Decoration - You will be able to give your Font the underlying effect or strikethrough, providing a little extra. Click here to learn more about Font Decoration.


    3. This will give you a preview of your changes before you save and move on. This will give you an idea of how the size and look will be once you hit save.



Links to Related Articles


Cart Designer 101


If you didn't get your question answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support.