Change header and paragraph font families for Card element

Support
#1

How can I change the header and paragraph font families for only one Card element? Is there a way to do something in the style box of the card element itself or does the CSS need to be pasted into the global CSS customization panel?

#2

Hi @whitelobster11,

Thanks for writing in.

First, add class to the card element that you want to customize. Then add this in your custom CSS:

.yourcustomclass .x-face-title{
font-family: yourfontfamily;
}

.yourcustomclass x-face-text{
font-family: yourfontfamily;
}

Let us know how it goes.

Thanks.

#3

Hello

Thanks for this. I tried pasting this into the CSS and adding a corresponding class tag to the card but it had no effect. What else can I try? I’ll leave a secure note below with my login in the event you’d like to test it on the page itself

Thank you so much!

#4

Hello There,

Thanks for getting back to us. I have inspected all your pages and I could not find the page where you have added the card element. Could you please provide url of the page were we can find it?

Thank you.

#5

Hello

Thanks for looking into this. If you visit the main ‘welcome’ page you will find a card on the right side that starts as red and flips to white on rollover/hover. Please let me know if you need any additional info

http://bedstuyloveaffair.us/wordpressdemo/
http://bedstuyloveaffair.us/wordpressdemo/welcome

both go to the same page

Thanks so much!

#6

Hi There,

You seems to added your class on the STYLE field? Please move that to the CLASS field instead.

screenshot

And then add this on your custom CSS.

.flippycard .x-face-title,
.flippycard .x-face-text {
	font-family: Arial, cursive;
}

Cheers!

#7

Sorry for missing that, just fixed it and it works perfectly now thank you

One question-right now I have it set to Arial but if I set it as a google font it doesn’t work- how can I modify the css to set the font to Baloo Thambi?

Thanks so much!

#8

Hi There,

To add the Google Font Baloo Thambi add this line on top of your child theme’s style.css file.

@import url('https://fonts.googleapis.com/css?family=Baloo+Thambi');

And then upate the given CSS code to this:

.flippycard .x-face-title,
.flippycard .x-face-text {
	font-family: 'Baloo Thambi', cursive;
}

Follow this thread for full instruction on how to add a Google Fonts manually.

Cheers!

#9

Hello

I tried doing what you said but still no luck

This is how my child theme style.css file looks

/*

Theme Name: X – Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

*/

@import url(‘https://fonts.googleapis.com/css?family=Baloo+Thambi’);

Is there something I am doing incorrectly/ need to change?

Thanks so much!

#10

Hi There,

Try moving the given CSS on top of all your custom CSS.

.flippycard .x-face-title,
.flippycard .x-face-text {
	font-family: 'Baloo Thambi', cursive;
}

There might be an syntax error somewhere on your custom CSS that preventing that code to work. Check your entire Custom CSS here (http://csslint.net/).

Address any found errors and clear your browser’s cache before you preview your page.

Cheers!

#11

That worked perfectly thank you so much

One last question- if I wanted the body text of the card to be in a different font than the header text, how should my code be formatted?

#12

Hi There,

Notice that on my code that I merge the .flippycard .x-face-title and .flippycard .x-face-text and separated it with a comma ( , ). You can separate that

/*for card title*/
.flippycard .x-face-title {
	font-family: 'Baloo Thambi', cursive;
}

/*for card content*/
.flippycard .x-face-text {
	font-family: 'Baloo Thambi', cursive;
}

Hope it helps,
Cheers!