CSS - Change fonts on standard slider

Ask the Community Customization
1

Hi,

Does anyone know the CSS to change title and text fonts in the standard slider? I have found it for the testimonials slider, but can’t find CSS anywhere for the standard slider. Have checked all over!

Thanks

1 Like
2

Hi @Will, welcome to the community, very happy to have you join us! :hugs:

This CSS code should help, please try to add it to your widget Custom CSS section:

.eapp-slider-badge-component{
    font-size: 24px;
    color: red;
}
.eapp-slider-title-component{
    font-size: 34px;
    color: red;
}
.eapp-slider-text-component{
    font-size: 19px;
    color: green;
}
.eapp-slider-button-link{
    font-size: 19px;
    color: yellow;
}

Please let me know if it worked :slight_smile:

3

Hey Helga, thanks so much for the fast response! This is great, I was also wanting to change the font so it matches brand fonts on the website - is this possible?

Thanks,
Will

5

Hi Will,

You can add the following code if you want to use the same font for all slider elements:

.eapp-slider-slide-elements {
    font-family: Arial;
}

Alternatively, you could add font-family to each element in the code Helga gave you:

.eapp-slider-badge-component {
    font-size: 24px;
    color: red;
    font-family: Arial;
}

Let me know if it helps!

2 Likes
7

Amazing, thanks Masha - and thanks Helga. Great community, you rock! Cheers

2 Likes
8

Any time, Will! :heart_eyes:

9

Hello, is there a way I can change the font to Oswald? Thank you!

1 Like
10

Welcome to the Community, @user17612 :wave:

This code should help:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&display=swap');

.eapp-slider-slider-component {
  font-family: Oswald;
}

Please add it to the Custom CSS field on the Advanced tab of your widget’s settings and let me know if it worked :slightly_smiling_face: