# Change font, font size and font style for all elements in floating mode

**URL:** <https://community.elfsight.com/t/change-font-font-size-and-font-style-for-all-elements-in-floating-mode/24946>\
**Category:** Audio Player\
**Created:** [November 8, 2023, 5:41pm UTC](https://community.elfsight.com/t/change-font-font-size-and-font-style-for-all-elements-in-floating-mode/24946 "2023-11-08T17:41:43Z")\
**Posts on this page:** 1\
**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:** [November 8, 2023, 5:41pm UTC](https://community.elfsight.com/t/change-font-font-size-and-font-style-for-all-elements-in-floating-mode/24946/1 "2023-11-08T17:41:43Z")

</div>

Add this code to the Custom CSS field on the Settings tab of your [Audio Player](https://elfsight.com/audio-player-widget/) widget’s settings:

```auto
/* Font of all elements*/
.global-style,
[class*='Playlist__Component'],
[class*='FloatingBar__StyledPlaylist'],
[class*='FloatingBar__Container'],
[class*='Small__Component-sc'],
[class*='Mobile__ButtonWrapper-sc'],
[class*='Mobile__InfoContainer-sc'],
[class*='ProgressBar__Component-sc'] {
  font-family: Calibri;
}
/* Playlist items title*/
.global-style,
[class*='PlaylistItem__Title'] {
  font-size: 17px !important;
  font-style: normal !important;
}
/* Playlist item duration*/
.global-style,
[class*='PlaylistItem__Duration'] {
  font-size: 19px !important;
  font-style: normal !important;
}
/* Progress bar time start and end*/
.global-style,
[class*='Small__Title-sc'],
[class*='Mobile__Title-sc'],
[class*='ProgressBar__TimeStart'],
[class*='ProgressBar__TimeEnd'] {
  font-size: 17px !important;
  font-style: normal !important;
}

```