An issue with accordion menu created with custom code

After copy pasting the custom code for the accordion menu, I’ve changed the typeface. When I preview the project the font works perfectly fine on my screen. But if I open the project on someone else’s laptop or on mobile then the font is not displayed correctly. It changes to a default font. Anyone experienced this issue? And do you know how to solve this? Do I need to add smth else to the custom code?

Any leads are much appreciated! <3

how did you changed the typeface exactly?. a bit of code and a projectlink would be helpful to see what might be the problem.

Hi there! I changed it in the Widget code where there is this line ‘’ .accordion-container p.accordion {
font-family: Santa Ana Medium;
font-size: 26px;‘’

I’m attaching a screenshot - that’s how it looks in my preview without issues. but in other laptops it shows a default font.

And here is the project link: Page 5 from ‘Creative Utility Desk’

hey… your link isnt working, so I cannot check it in you project.

What works on my side is setting up a textwidget with the font you want the accordeon to have.
Preview/publish and check in the devtools of your browser which font-family is written there. copy and paste into your accordeon.

This works on my side with webfonts from the library as customfonts.

1 Like

sorry! i hope this one will work: Page 6 from ‘Creative Utility Desk’

thanks for the tips! can you please share a screenshot with me if it’s not too much to ask. where exactly should i look to check the devtools of my browser?

thank you so much!!

you have to view your page in preview or published mode and open the devtools of your brother.


1 Like

thank you so much!!! i followed these steps and it did work - can’t thank you enough <3

the only thing i couldn’t figure out yet is how to change the value of the same font (i tried to change the font weight and size in the code but they remain the same after I save) - though it’s not super important.

Thank you again!!