Timothy J Melody
  • Home
  • Web Design
  • SEO
  • Google Places
  • About
  • Blog
  • SEO Analysis
  • Contact

How to Change the Button Text Font on Weebly

11/25/2012

14 Comments

 
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

Weebly editor: dDesign Tab and Change Fonts tab.
In the Weebly Editor click DESIGN and then to the left click Change Fonts.

Step 2. Under General Click Buttons

Weebly element font options for paragraph titles. paragraph text, links, buttons and blockquotes.Change fonts.
Under the General grouping click Buttons and you will then see all the options to change the button font.

Weebly button font styling options: font, size and font weight.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

Weebly design options.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);
}

Weebly CSS sheet with button CSS commands.
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
14 Comments
Alexander Huynh link
6/1/2013 04:11:31 pm

Hey mate, how do you change the text (NOT FONT) on weebly?

Reply
trivago app link
11/12/2016 09:25:41 am

It is a great article. You will surely like this also because it is a great stuff, yeah it’s give us lots of interest and pleasure. Their opportunities are so fantastic and working style so speedy. Thank you for sharing the nice article.

Reply
SMS Online link
7/24/2018 09:44:45 am

I think this is a really good article. You make this information interesting and engaging. You give readers a lot to think about and I appreciate that kind of writing.

Reply
Mariam W link
12/4/2020 06:12:08 am

Helloo mate great blog post

Reply
V8web link
3/31/2021 12:31:27 am

Thank you. I will try your suggestions.

Reply
MckimmeCue link
3/3/2022 07:10:20 am

This is a very informative—edifying article to all. Thanks a lot! Continue to post!
If you are looking for coupon codes and deals just visit coupon plus deals dot

Reply
카지노사이트 link
8/14/2022 02:32:01 am

I think this is a really good article. You make this information interesting and engaging. You give readers a lot to think about and I appreciate that kind of writing.

Reply
바카라사이트 link
8/30/2022 03:34:25 am

It is my first visit to your blog, and I am very impressed with the articles that you serve. Give adequate knowledge for me. Thank you for sharing useful material. I will be back for the more great post.

Reply
犀利士禁忌 link
9/6/2022 04:25:38 am

I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post.

Reply
Exam Wishes For Students From Teachers link
9/7/2022 05:08:30 am

I appreciate everything you have added to my knowledge base.Admiring the time and effort you put into your blog and detailed information you offer.Thanks.

Reply
master link
9/23/2022 10:18:32 pm

I think this is an informative post and it is very useful and knowledgeable.
<a href="https://www.nomukti.com/" target="_blank" title="먹튀검증사이트">먹튀검증사이트</a>

Reply
stylish name for free fire link
11/2/2022 05:20:02 am

Great content material and great layout. Your website deserves all of the positive feedback it’s been getting.

Reply
Assume World link
2/2/2023 12:17:47 pm

Thank you for some other informative website. The place else may just I get that kind of information written in such a perfect method? I have a venture that I am simply now running on, and I’ve been at the glance out for such info.

Reply
ikea philippines owner link
2/5/2023 12:19:10 am

All your hard work is much appreciated. Nobody can stop to admire you. Lots of appreciation.

Reply



Leave a Reply.

    Timothy J Melody

     

    Archives

    March 2015
    September 2014
    August 2014
    November 2012
    October 2012
    June 2012
    January 2012
    November 2011

    Categories

    All
    Google Places Optimization
    Local Seo

    RSS Feed

Serving clients in
Houston, Austin, San Antonio, Dallas, Sacramento, San Diego, Los Angeles, Philadelphia, Portland, Seattle
and more.
  • Home
  • Web Design
  • SEO
  • Google Places
  • About
  • Blog
  • SEO Analysis
  • Contact