# Change font size of all elements (Event Calendar)

**URL:** <https://community.elfsight.com/t/change-font-size-of-all-elements-event-calendar/36515>\
**Category:** Event Calendar\
**Created:** [January 8, 2024, 2:07pm UTC](https://community.elfsight.com/t/change-font-size-of-all-elements-event-calendar/36515 "2024-01-08T14:07:36Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [January 8, 2024, 2:07pm UTC](https://community.elfsight.com/t/change-font-size-of-all-elements-event-calendar/36515/1 "2024-01-08T14:07:36Z")

</div>

Add the code below to the Custom CSS field on the Style tab of your [Event Calendar](https://elfsight.com/event-calendar-widget/) widget’s settings:

```auto
/* Category */
.eapp-events-calendar-category-item {
  font-size: 20px;
}

/* Name */
.eapp-events-calendar-name-component {
  font-size: 20px;
}

/* Tags */
.eapp-events-calendar-tags-item {
  font-size: 20px;
}

/* Location and time */
.eapp-events-calendar-slider-item-locationAndTime * {
  font-size: 20px;
}

/* Popup category */
.global-styles, 
.eapp-events-calendar-popup-item-category {
  font-size: 20px;
}

/* Popup name */
.global-styles,
.eapp-events-calendar-popup-item-name {
  font-size: 20px;
}

/* Popup tags */
.global-styles,
.eapp-events-calendar-popup-item-tags .eapp-events-calendar-tags-item {
  font-size: 20px;
}

/* Popup description */
.global-styles,
.eapp-events-calendar-popup-item-description {
  font-size: 20px;
}

/* Popup time */
.global-styles,
.eapp-events-calendar-popup-item-time * {
  font-size: 20px;
}

/* Popup location */
.global-styles,
.eapp-events-calendar-popup-item-location * {
  font-size: 20px;
}

/* Popup host */
.global-styles,
.eapp-events-calendar-organizer-component * {
  font-size: 20px;
}

/* Popup share */
.global-styles,
.eapp-events-calendar-share-title,
.eapp-events-calendar-share-content * {
  font-size: 20px;
}

```

  

Guys, if this code was helpful to you, please drop a line in the comments. Your feedback helps us improve our services and provide better solutions 🙂

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 11, 2025, 11:37am UTC](https://community.elfsight.com/t/change-font-size-of-all-elements-event-calendar/36515/2 "2025-03-11T11:37:20Z")

</div>

A post was split to a new topic: [Change size of the event cards](https://community.elfsight.com/t/change-size-of-the-event-cards/106298)