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

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.

Whap

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.

Steinbok

Answer 2

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 :)

Concordia

This is great, I found where the problem is. Since I am not an css pro, i want to override the following, is this a correct css sample? .ui-body-c,.ui-dialog.ui-overlay-c{ { text-shadow: 0pt 0px 0pt rgb(0, 0, 0); } – Whap

//This is used to override jQuery Mobile themes .ui-body-c,.ui-dialog.ui-overlay-c{ text-shadow: 0pt 0px 0pt rgb(0, 0, 0); } .ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button { font-family: Helvetica, Arial, sans-serif, Verdana; font-size: 12px; } – Whap

Answer 3

From what I understand... jQuery mobile might just send his own css fonts into your mix. If you have a css file with the font set :

Try some testing by adding !important for your font styles.

Hope this will help you figure out a solution :)

Mudcat

adding important can cause some nasty effects in the long term, I would go with actually finding which selectors are applying the fonts and using the cascading part of css to override them. – Concordia

Examining the page this is what I see for my element: font-family: Helvetica, Arial, sans-serif; .ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button - Helvetica,Arial,sans-serif – Whap

So, it seems like its a .ui-body-c problem ? Would I need to override this in my css. Sorry I have not had a lot of experience with css, so I apologize if I am missing something obvious. – Whap

Answer 4

Thanks to the help by agrublev and darryn.ten the following worked for me:

Here are examples to change the shadow of the body and fonts:

.ui-body-c,.ui-dialog.ui-overlay-c{
    text-shadow: 0pt 0px 0pt rgb(0, 0, 0); 
}
.ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button{
        font-family: Helvetica, Arial, sans-serif, Verdana;
        font-size: 12px;
        text-shadow: none;
        color:black;
}

Whap

Answer 5

creat your own css for jquery mobile and override font family give your own font family

Derekderelict

Could you please add some example or code for how to do this? – Henigman

Answer 6

jquery mobile uses themes. Hit http://themeroller.jquerymobile.com/

set the font in the "global" tab (for me: Raleway, Verdana, etc), download and install the theme and you're set. For jqmobile, you need to use your theme css, jqm icons, and jqm structure INSTEAD of the usual single jqm css.

overriding stuff in css may get you in different trouble with different browsers... And that's NOT the point with jquerymobile.

Furmenty