[AlexParticipant]

Hello,

There’s no option to change the font for buttons via Customizer, is there? So can you give me a hint on how to do that?

Thanks!

—
Alex

[RadModerator]

Hi there,

Thanks for writing in.

Right, there is no option for button’s font in customizer. It simply inherit the font assigned on page’s body.

But, you can always apply another font style through custom css. Example, add this css at your customizer’s custom css.

.x-btn {
font-family: Arial;
}

That is as long as your preferred font is active or installed.

Thanks!

[AlexParticipant]

Hello,

Thanks!

But what if I want to use Google Font, on of predefined in your Customizer? I can easily select any font for headings and content, but what can I do with buttons labels?

Thanks!

—
Alex

[RadModerator]

Hi Alex,

That’s where you will need to apply your google font if not selected from customizer. Every google font has instruction for embedding their font. Example,

Go to google font and select your font, then get it’s embed code.

https://www.google.com/fonts#UsePlace:use/Collection:Roboto

There are four steps,

1. Choose font weight
2. Choose the character set
3. Get the embed code

Eg. <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

And you can add the embed code at X theme by adding this at your child theme’s functions.php

add_filter('wp_head', 'google_font_roboto');

function google_font_roboto () { ?>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<?php }

4. Apply the font style to your elements (eg. the button)

.x-btn {
font-family: 'Roboto', sans-serif;
}

Hope this helps 🙂

[allancaegParticipant]

Feature request: please put the button font control on X-powered Customizer

The body font isn’t a very good reference for button font

[ZeshanMember]

Hi Allan,

We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!

[AlexParticipant]

I vote for this one too!

[ChristopherModerator]

Noted, thanks.

[seanmbcParticipant]

I vote for this too!

[Prasant RaiModerator]

We have taken your request. Thanks.

[StephenwParticipant]

Same!

[NicoModerator]

Vode counted to this feature request.

Feel free to follow up this request or to send us more feature request or changes

Thanks.

[philip.4242Participant]

I would also like this feature.

[philip.4242Participant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for updating this thread! i have check your site and I found out that you have inserted an invalid css. Please update it and use this instead:

/* remove red bar below slider */
.x-slider-container.below {
  border: none;
}

a.x-btn {
  font-family: "Montserrat", sans-serif;
}

Hope this helps. Kindly let us know.

[Author]

Posts