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
Step 2. Under General Click Buttons
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.)
Step 3. Changing Font Color
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 */
color: #fff !important;
font-family: Arial, Helvetica, sans-serif;
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.
Step 4. Italics and Underline
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
for italics and
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
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
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.