How can I change the slider font to a customized font on my page?

Store Design

Topic summary

Main issue: a custom font (“RideLife-PerformanceLT”) isn’t applying to slider text.

  • Setup: The font was uploaded via Shopify CDN and defined with @font-face, then assigned to the selector .cadex-tittle with font-family, color, and text-shadow.
  • Problem: The change does not affect the page displaying the slider; user aims to replicate the typography from the referenced CADEX Tri showcase.
  • Analysis: Support indicates theme CSS prevents the rule from taking effect because the slider text is wrapped in an tag inside .cadex-tittle, altering selector targeting and specificity.
  • Fix proposed: Replace the rule with .cadex-tittle em { font-family: ‘RideLife-PerformanceLT’ !important; color: #ffffff; text-shadow: 0 0 5px rgb(0 0 0 / 95%); } to directly target the emphasized text.
  • Terms: @font-face loads custom fonts; CSS selectors target elements; is an HTML tag for emphasized text.
  • Status: Actionable solution provided; awaiting user confirmation of resolution.
Summarized with AI on February 3. AI used: gpt-5.
1

I would like to change the font “cadex tri” from the slider to a customise font.
I have uploaded and entered the css of the font

@font-face {
    font-family: "RideLife-PerformanceLT";
    src: url('https://cdn.shopify.com/s/files/1/0592/5778/2446/files/RideLife-PerformanceLT.otf?v=1670999184') format("opentype");
}

and add css for the font.

.cadex-tittle{
  font-family: 'RideLife-PerformanceLT'!important;
  color: #ffffff;
  text-shadow: 0 0 5px rgb(0 0 0 / 95%);
}

However, it is not affected on the page. This is the page that I need to replicate. Please assist.

2

Hello @seantay1993

It’s GemPages support team and glad to support you today.

Due to this code of the theme, the font you add by css is not working

GemPages_0-1671008019187.png
GemPages_0-1671008019187.png1919×938 562 KB

In this case you should replace the above CSS code with the following code:

.cadex-tittle em{
  font-family: 'RideLife-PerformanceLT'!important;
  color: #ffffff;
  text-shadow: 0 0 5px rgb(0 0 0 / 95%);
}

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team