How do I change the font for a button I create using Visual Composer? There’s no way to choose a font from within the button settings box that pops up when you open it. So the font must be dictated by the Theme Panel. When I go to “Theme Fonts” in the Theme Panel, I see the “Default Buttons” setting in the “Other” section.
But changing the font there doesn’t change it on my site. Please take a look at the button on my home page: http://www.travisneighborward.com. It says BUY THE BOOK. It’s in a serif font. But I have the default button setting set to Monserrat, which is a sans serif font.
Thanks in advance for help.
Hi,
The button inherites the body font, in your case – font-family: Merriweather. You can set a different font family for the button using css, just enter it in Theme panel->Custom Css like this – https://www.screencast.com/t/jT9ohzphaP
.vc_btn3 {
font-family: Monserrat, Verdana, Geneva;
}
Result – https://www.screencast.com/t/F8yxNljJH0
Please let me know if this works for you
Thanks
Thanks! That worked perfectly!
I just noticed that all my blog posts that use Visual Composer boxes are now using Monserrat for the text font, instead of Merriweather. Is it because of this custom code? It wasn’t like this before.
Or where in Theme Panel do you find the font specifically for VC boxes?
All my other blog posts that I didn’t create using VC have the correct font.
Hi,
The code provided above applies only for that button so it can not have any effect on anything else, maybe you have set a different font family for the elements on the page in theme panel – https://www.screencast.com/t/e24QWj0YlGMv or a custom code in theme panel. Check in the theme panel and see what font are the elements on the page using and make changes if you have to, also if you make any changes clear the cache afterwards.
Thanks
Hi! The button font change worked but now it’s reverted to a serif font. Here’s the CSS I inserted in my Custom Code section of the theme panel. Any idea how I should change it? You can see that it’s serif by looking at https://www.travisneighborward.com — look for the button that says “Buy the Book”
.vc_btn3{
font-family: Monserrat, Verdana, Geneva;
}
Hi,
Unfortunately I can not access your website at the moment, there seems to be a restriction limit in place – https://www.screencast.com/t/dp2FcjKw2t3 From what I can tell, there is a mistake in the code provided, it should be like this and it works on my end. Please try adding this code and check the results.
.vc_btn3 {
font-family: Montserrat, Verdana, Geneva;
}
Thanks
Sorry, what country are you in? I had to put some blocks in place because of hackers. I can lift it so you can see. I did change the code as you suggested but it didn’t solve the problem. I can make a button with Monserrat from within a text box, but not by using the VC button — the VC button is still resorting to Monserrat.
Hi,
We are from Romania, if you can provide access I will take a look at the button and investigate the issue.
Thanks
Sorry about that. You should be able to look at the coding now. Thanks!
Hi,
I have tried applying the code provided above and it seems to be working fine – https://www.screencast.com/t/CwDA7TgJSH I see that the code you have entered does not apply in your case, maybe it is not strong enough, or you can try to enter it like the one below and also clear the WP Super Cache cache because it could be preventing the change from taking effect.
.vc_btn3 {
font-family: Montserrat!important;
}
Thanks
Thanks! That didn’t do it — but I think I figured out what was blocking it, and now I’ve fixed it! In Theme Panel I had the “Body” font set to Merriweather so it was overriding the custom CSS. I set it instead to “default font” and now the button is using that custom CSS to make the button text Monserrat.
