How to Change the Button Text Font on Weebly

Nice button, can I change the font?

This article has been updated from an earlier version to reflect recent changes in Weebly that make changing the button font a whole lot easier.

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.

Step 1. Click on the Design Tab and Then Click Change Fonts

In the Weebly Editor click DESIGN and then to the left click Change Fonts.

Step 2. Under General Click Buttons

Change fonts.

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

---

Customize 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.)

---

Step 3. Changing Font Color

Design Options. Edit HTML/CSS

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);
}

---

Find the Buttons CSS and in particular .wsite-button.

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.

Step 4. Italics and Underline

What if I want Italics?

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.)

Step 5. Uppercase and Lowercase

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.

Related Articles: 
How to Add New Fonts to Weebly Using Google Web Fonts
How to Add H1 Tag to Weebly and other HTML Heading Tags