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

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.

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.

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

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