Call to Action - Need to change font style


#1

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!


#2

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.


#3

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


#4

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.


#5

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.”


#6

Hello Justin,

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

Kind Regards, Roman.


#7

Hi Roman,

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


#8

Hello Justin,

Yes, at the top of the entire section.

Kind Regards, Roman.


#9

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


#10

Great! You are welcome Justin :slight_smile:

Kind Regards, Roman.


#11