How to override default font set by a CSS library (onsen-css-components.css in OnsenUI)?

Question

The font for my H1 element in the following page structure is being overridden by OnsenUI CSS and I can't figure out why or how to override it successfully:

<div class="page__content page--material__content">
    <div id="cmbcontent" class="source-serif-pro-font-light">
                 <h1 style="color: rgb(99, 81, 109);">My text here</h1>

Onsen's CSS class page__content is defined as follows in their CSS:

.page__content h1 {
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  margin: 0.6em 0;
  padding: 0;
}

and page--material__content is the same:

.page--material__content h1 {
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  margin: 0.6em 0;
  padding: 0;
}

My index.css file includes the following rule for the font, and is included after onsen CSS in my HTML file.

.source-serif-pro-font-light { 
    font-family: 'Source Serif Pro Light', serif;
    font-weight: 300;
    font-style: normal;
}

In my code I use JQuery to set the font: $('#cmbcontent, #cmbcontent h1, #cmbcontent h3').addClass('source-serif-pro-font-light'); and I've confirmed by inspection that it's then set on those elements but it's being overridden by rules for ".page--material__content h1" and/or ".page__content h1" in onsen-css-components.css (I'm using the .min version) Even doing $('#cmbcontent > h1').addClass('source-serif-pro-font-light'); or $('#cmbcontent > h1').css('font-family', "'Source Serif Pro Light', serif;"); doesn't work, and yet I think these should as my understanding is more specific CSS rules override less specific ones.

This is happening using OnsenUI 2.11.2 in Chrome (latest version) launched from Microsoft Cordova Tools in VSCode on Windows 10.

Any suggestions please? Thanks