Change font in Event Calendar popup

Ask the Community Customization
1

How can I change the fonts used in the pop-up?
Thanks a lot !

image
image1398×2464 125 KB

2 Likes
2

Hi there, @Axel_Clamens :wave:

Here is the code for this case - Change font for elements in popup

Try it out and let me know if it helped :wink:

1 Like
3

I imported fonts using @import on my CSS, and it works on the event page but doesn’t load the font in the pop-up.
What is more is that it seems that I can only change all the elements in pop-up at the same time and use the same font.
I’d need to use one font/style for the Title, one for the Category, etc…

2 Likes
4

Sorry for the inconvenience!

Here is the code to change the font of all popup elements separately:


.global-styles,
.eapp-events-calendar-popup-item-category  {
  font-family: 'Noto Sans';
}

.global-styles,
.eapp-events-calendar-popup-item-name {
  font-family: 'Noto Sans';
}

.global-styles,
.eapp-events-calendar-popup-item-button {
  font-family: 'Noto Sans';
}

.global-styles,
.eapp-events-calendar-button-element-caption {
  font-family: 'Noto Sans';
}

.global-styles,
.eapp-events-calendar-tags-item {
  font-family: 'Noto Sans';
}

.global-styles,
.eapp-events-calendar-popup-item-description {
  font-family: 'Noto Sans';
}

.global-styles,
.eapp-events-calendar-popup-item-readMoreButton {
  font-family: 'Noto Sans';
}

.global-styles,
.eapp-events-calendar-popup-time-component eapp-events-calendar-popup-item-time {
  font-family: 'Noto Sans';
}

.global-styles,
.eapp-events-calendar-popup-time-component eapp-events-calendar-popup-item-time {
  font-family: 'Noto Sans';
}

.global-styles,
.eapp-events-calendar-popup-item-location {
  font-family: 'Noto Sans';
}

Try it out and let me know if it helped :slightly_smiling_face:

1 Like