javascriptcssjquery-uijquery-mobilethemeroller

JQuery Mobile - Override font-family themes for the whole body


I recently added jQuery mobile to my website.

However, the jQuery theme broke my previous fonts. While most of my page works great, especially the nice jQuery Mobile sliders, I am having a real problem with the fonts.

I have custom fonts set and they work correctly without the jquery mobile css. However, once I include the jquery mobile css it overrides my fonts.

I have tried adding data-role= "none" to the body and the divs but that did not help.

I have also tried adding data-theme = "none" but that also does not help.

Is there a way to disable jQuery custom font-family theming on the body of my page?

Thanks for the help.


Solution

  • Here is my CSS for replacing the entire applications font with Roboto, the Android 4.0 ICS font.

      @font-face {
        font-family: 'RobotoRegular';
        src: url('../font/roboto/RobotoRegular.eot');
        src: url('../font/roboto/RobotoRegular.eot?#iefix') format('embedded-opentype'),
             url('../font/roboto/RobotoRegular.woff') format('woff'),
             url('../font/roboto/RobotoRegular.ttf') format('truetype'),
             url('../font/roboto/RobotoRegular.svg#RobotoRegular') format('svg');
        font-weight: normal;
        font-style: normal;
      }
    
      /* Android jQM Font Style Overrides */
      body  * {
        font-family: "RobotoRegular" !important;
        font-weight: normal !important;
      }
    

    You may have to target specific elements too if the above is not enough. I had to also include the following:

      .ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a,.ui-bar-a,.ui-body-a,.ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a,.ui-body-a input,.ui-body-a select,.ui-body-a textarea,.ui-body-a$
        font-family: "RobotoRegular";
      }
    

    I hope you come right. Good luck.