Bottega Phone Number Phone

[Fil DeStefano]

Hi Bill…how can I change the phone number font? Is there a section just for the phone number?

[Bill Robbins]

Hello Fil,

Great question. Just about anything can be changed. For the phone number, are you wanting to change the one in the header or the one in the footer? Do you want to change the typeface or do just need to change things like italicization, color size and so on. Let me know and we’ll go from there.

Thanks,
Bill

[Fil DeStefano]

Sorry…yes the header typeface, color and size. Just to make it more pop next to the menu. Thanks!

[Bill Robbins]

Thanks for letting me know Fil. We can do that. The only part that’s slightly tricky would be the typeface. The theme uses Google’s webfonts to give us more font options. Otherwise we could only display fonts that were installed on your visitor’s computers.

But in order to use one of the typefaces it has to be loaded. So you’ll need to have the typeface that you want to use selected in at least one of the font drop-down menus in the theme. If this is the only place you want to use this font, one option would be to select it as the logo font and use an image logo. Once you’ve picked a typeface, here’s what to do:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #phone-number a,
   #phone-number a:visited {
   	color: #fff;
   	font-size: 23px;
   	font-style: italic;
   	font-family: Rokkitt, serif; 
   	font-weight: 700;
   }
   

3. You’ll need to replace the Rokkitt, serif in the snippet above with the font you’d like to use. You can find that by viewing the front end of your site, right clicking on the site background and selecting view source. Look through the code there just a bit and you’ll see a section that looks like this:

   
   	body {font-family:PT Sans, sans-serif; font-weight:Normal; font-size:15px; }
   #text-logo p a, #text-logo p a:visited, #text-logo h1 a, #text-logo h1 a:visited {font-family:Rokkitt, serif; font-weight:Normal; font-size:50px; }
   h1, h2, h3, h4, h5, h6 {font-family:Rokkitt, serif; font-weight:Normal; font-size:Array; }
   #navigation .menu li, #navigation .menu li li {font-family:Rokkitt, serif; font-weight:Normal; font-size:20px; }
   h3.widget-title, #address-left h3 {font-family:Rokkitt, serif; font-weight:Normal; font-size:24px; }
   

   You can find the font-family you need from the place where you’ve loaded it, i.e. #text-logo. Update the font-family in the snippet above to reflect the one you want to use.

   You can also change the color, size, style, weight and so on there. If you don’t want to have it italicized, just delete that row. The weights are set in 100 increments with 100 being light and 900 being very bold.

4. Update your settings.

See how that goes and let me know if you have any questions or trouble.

Have a great week,
Bill

[Fil DeStefano]

Perfect thanks so much!

[Bill Robbins]

Anytime 🙂

[Author]

Posts