Fonts change

Hello!
The fonts I use when formatting the calendar of events widget change when I paste the code into my Shopify website… Can I modify it to see the fonts that I want? Help, please…
Thx so much…

Hi and welcome to the forum!

Sure, I guess I can help you with that :slight_smile:

Please try to add the following CSS code to your widget’s Custom CSS field on Style tab:

.eaec-events-calendar-component{
font-family: Calibri;
}

You’re welcome to change Calibry to any Google font you’d like to see :slight_smile:

Please let me know if it helped.

Hey Helga, thx so much for your response.
Pls help me out with this since I know nothing about CSS code :innocent:

This is the code I used:

.eaec-events-calendar-component{ font-family: Calibri; }

Is this laid out the right way? (When you hit the reply button the whole code will show?)
I didn’t get any changes in my calendar…
I’d appreciate any help you can give me
Jaime

1 Like

Hey Jaime!

Of course, let’s figure it out together :slight_smile:

Yes, the code you use is correct, and it should work. Could you please send me a link to the page with the widget in question? I’ll be happy to check out what’s going wrong and find a solution :slight_smile:

Hey thanks so much!

Here’s the link: Events – Appalachian Botanical Co.

the enclosed screens show the difference

hmmm… it only allowed me to upload one image :money_mouth_face:

Thanks for the link!

It seems you’ve put it in the wrong place, that’s why it didn’t work :slight_smile:

Could you please remove it from where it is now and add it to your widget’s settings? Please find Style tab → Custom CSS and insert the code:

image

And you’re welcome to change Calibri to any other Google font of your choice :slight_smile:

Please let me know if it helped!

OMG, thx so much. I do appreciate it! Thx Helga. Great to chat with a human and not a bot…

1 Like

Anytime, Jaime!

This forum is for you to get answers to your questions and learn new things, so don’t hesitate to take part in the community’s life here :slight_smile:

1 Like

A post was split to a new topic: Change font in Countdown Timer widget

Hi - Sorry to bring up an already complete thread, but I’m having the same issue as this user but the solution isn’t working for me. I’ve also looked in other threads for help but no result.

I’ve copied this into the custom css section “.eaec-events-calendar-component{
font-family: Calibri;
}”

But no matter what I change the font to, it displays a different one on our website. I’ve also tried to add !important as seen in other threads but this doesn’t seem to make a difference.

1 Like

Hi @user693, thank you so much for joining us, welcome! :hugs:

I’m sorry that the code didn’t work for you, is there an option for you to send me a link to your website where the widget is installed? I’ll be happy to check things for you :pray:t2:

Also, could it be that the needed Google font is not enabled on your website? If it’s not, the CSS code won’t work, unfortunately.

A post was merged into an existing topic: Need CSS help for FAQ app

Hi Helga, here is the link to the page I’m using the widget on (This might change in the future as I am trailing it on a different page) : EVENTS & WORKSHOPS old | Coalville C.A.N CBS (coalvillecan.coop)

Right now I have the font as ‘Arial’ which is used elsewhere on the site, so it should be available to use.

Thanks very much for the quick reply! And hope this helps.

1 Like

@user693, thanks a lot for the info and your kind words! :hugs:

We’ve checked things, and since our Event Calendar was transferred to the new configurator, there have been changes with classes as well :frowning:

But our devs have made a new CSS code for you, please let me know everything’s fine on your end now.

.eapp-events-calendar-events-calendar-component,
.global-styles, .eapp-events-calendar-popup-item-inner{
font-family: Arial;
}

Thank you!

That’s fixed it, thank you very much!

1 Like

Awesome! You’re most welcome, @user693 ! :hugs: