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

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!

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

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 🙂

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

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!