So you love your button on your Weebly website . . . but you want to change the text font. How do you do it?

Changing the text font on on Weebly buttons is easy.

Under the General grouping click Buttons and you will then see all the options to change the button font.

Options available are the font itself (e.g. Arial, etc.), the font size on both large and small buttons and the font weight (e.g. bold, regular, etc.)

One option missing in the above is an option to change the color. To do tht then you will have to edit your themes main-style.css. 

Go again to DESIGN but this time choose Edit HTML/CSS at the very bottom.

Be sure to click on main-style.css. You will then have to scroll through and find the /* Buttons-----------------------*/ section. This is usually toward the bottom.

What you are looking for will look something like this under .wsite-button and usually under /* small */

.wsite-button {
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif;
    height: 34px;
    display: inline-block;
    font-size: 12px;
    border: none;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    padding: 0 15px 0 0;
    background: url(button_red.png) no-repeat 100% -105px;
    text-shadow:0 -1px 0 rgba(0,0,0,0.9);
}

What you want to change is simply the color: definition, in this example, the first command. Simply change the hex code (e.g. #fff ) to your desired color. If you need help with color codes try this great site.

As in the example above you might want to keep or add the override command !important to override any other color definitions that might be hiding somewhere else.

If you want your button font to be italicized and you are using Google Chrome you can just select the button text and hit ctrl i. You can do the same thing to underline the text with ctrl u.

To do so with CSS, in the above mentioned wsite-buttons styling lines add

font-style:italic;

for italics and

text-decoration: underline;

to underline or use other text decoration properties. (Note, be sure there isn't already a CSS command for text-decoration:none; If there is, just change none to underline.)

Lastly, many Weebly themes use

text-transform:uppercase;

in the CSS to make button text all capital letters. If you want to change this find the command in the css and change it to

text-transform:none !important;


And that's it! Everything you every needed to know about Weebly button fonts. If there is anything I missed, go ahead and ask about it or add to the comments.

This package is designed to give the new small business everything it needs to gain rank and visibility online as quickly as possible with continuing effects on organic growth over the long term.

Includes:

• One Optimized Google Places Listing
  
• Complete Local Online Directories and Data Providers Submission
  
• 3-5 Page Website
  
• All three components optimized to work together for best possible ranking.
  
• 3 months starter SEO services