Question

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.

Answer 1

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.