Website CSS overriding Event Calendar Settings

Ask the Community Customization
1

Hi,

Can anybody suggest some custom CSS to stop my website’s theme from overriding the font settings in Event Cal when embedding. Although I choose the font in the style tab, when I embed the calendar, the date text between the navigation arrows and the text for the time block in the calendar are displayed in the website’s theme. Neither of the site’s fonts display well in the embedded calendar. If it helps, I’m using the Week View layout. I ‘presume’ this is a CSS issue.

Thanks,

Reg Dent

1 Like
3

Hi there, @regdent :waving_hand:

Could you please send me a link to the page where your widget is installed? I’ll be happy to look into this for you :slightly_smiling_face:

1 Like
4

Hi Max,

Currently, the calendar is at this address: https://www.zu-yoga.ch/testcal

I have tried adding this CSS to the calendar: .eapp-events-calendar-events-calendar-component{
font-family: ‘Calibri’ !important;
}
…but it still displays my site default fonts; though it does change the appearance of the calendar in the Elfsight UI.

Thanks for taking a look.

Reg

1 Like
5

Thank you!

If I got you right, you’d like to apply the Mandali font to all widget elements. I’ve added this code to the Custom CSS field on the Style tab of your widget’s settings:

@import url('https://fonts.googleapis.com/css2?family=Belanosima:wght@400;600;700&family=Mandali&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
font-family: 'Mandali';
}

Check it out and let me know if you like the result :wink:

1 Like
6

Thank you so much. Much better. One small point, though. If I were to use an open, common font such as Open Sans, would I still need to call up the font family from Google (as in your code snippet)?

Again, thank you for your kind help.

1 Like
7

Yep, you just need to replace the import URL with the URL for the Open Sans font :slightly_smiling_face:

1 Like