Call to Action - Need to change font style

Hello,

Currently I am interested in changing the font style for the text in the call to action widget (not the text in the button itself!) This is the code I am using currently. I want to try to use the Google Fonts (font style ‘Bad Script’). The font has changed but not to the ‘Bad Script’ style.

.roll-promobox .title{
	font-size:24px;
	font-weight: bold;
	font-family: 'Bad Script', serif;
}

Help please. Thanks!

Hello,

Try to use the following CSS code instead of what you mentioned.

You can add CSS code in Customize → Additional CSS section.

@import url('https://fonts.googleapis.com/css?family=Bad+Script');
.widget_sydney_action .roll-button {
    font-family: 'Bad Script', cursive;
    font-size: 24px;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

Thank you for the quick response. I am actually interested in changing the font of the text to the left of the button. So not the font in the button. How would I go about doing that?

Also, when I put the @import into the customer section an error comes up saying that using @import could break my site? Please advise.

Thank you for your help!

Regards,

Justin

Hello Justin,

  1. You can try to use this CSS code instead of previous in order to target text:
@import url('https://fonts.googleapis.com/css?family=Bad+Script');
.widget_sydney_action .title {
    font-family: 'Bad Script', cursive;
    font-size: 24px;
}
  1. Where exactly you see that error?

Kind Regards, Roman.

Hi Roman,

I’ve tried to input the code and the font does change, but not to the correct font style (‘Bad Script’).

This is what ‘Bad Script’ looks like:

Also, below is a picture of the error that I get. It states that “@import not allowed here.” and also in the top section mentions “Update anyway, even though it might break your site.”

Hello Justin,

Please try to put the @import rule on top of that section, it should help.

Kind Regards, Roman.

Hi Roman,

Do you mean at the top of the entire section for all of my added CSS? Please let me know. Thanks!

Hello Justin,

Yes, at the top of the entire section.

Kind Regards, Roman.

1 Like

Thank you for the help Roman! It worked! :grinning:

Great! You are welcome Justin :slight_smile:

Kind Regards, Roman.