How to change the font of an accordion element

Support
#1

Hello,

Im trying to make the font of my accordion elements looks the same that it content.
I want the text of the blue arrow to look the same as the text of the red arrow.

How do i do that? i have to add a class? if so, do i have to write it with the “.” in front of the name?
please help

#2

Hi,

Thanks for writing in!

To style your accordion Heading, you can add the code below in Theme Options > CSS

.x-accordion-heading .x-accordion-toggle {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size: 50px;
}

Change font-family and font-size as you wish.

If you would like to change only that specific accordion element, you can add a unique class.

and change your css code to this

.my-accordion .x-accordion-heading .x-accordion-toggle {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size: 50px;
}

Hope that helps

#3

Thanks that worked for the sizing, but for some reason the font does not look the same as the inside font of the accordion. Look, look at the “g” and the “y”:

Do you know what it could be? please help

#4

Hi there,

It seems to be the same font but just different font size.

Are the headlines inside the accordion content in an h html element like <h2>Poki</h2>?

If so, depending on what headline html is wrapping the text, please add this code in the global CSS:

.my-accordion .x-accordion-inner h2,
.my-accordion .x-accordion-heading .x-accordion-toggle {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-size: 50px;
}

Please change h2 in the code to the html element that wraps the headlines in your accordion content.

Hope this helps.

#5

Thanks for all the help. I found what it was, i went to the theme options and there i saw the font for the body is Lato. But also there is an option for the header font (i did’t know that), so in there it has a different font and i added that font to the css you both gave me, into the font-family part

#6

Glad you’ve sorted it out.

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.