Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 503
AlexIIP Avatar asked Feb 22 '12 22:02

AlexIIP


2 Answers

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.

like image 111
darryn.ten Avatar answered Nov 14 '22 09:11

darryn.ten


I would inspect the element and find out exactly where the fonts are being specified for example I just found that font's are specified here:

.ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button

So you can override that in your own stylesheet by specifying the same selector and presenting your own fonts :)

like image 35
agrublev Avatar answered Nov 14 '22 08:11

agrublev