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.

score 9 · Accepted Answer · answered Feb 23 '12 at 10:52

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.

score 1 · Answer 2 · answered Feb 22 '12 at 22:13

1

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

answered Feb 22 '12 at 22:13

agrublev

748
1
8
22

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); } – AlexIIP Feb 22 '12 at 22:39
//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; } – AlexIIP Feb 22 '12 at 22:56

score 0 · Answer 3 · answered Sep 28 '13 at 10:53

0

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

answered Sep 28 '13 at 10:53

dinesh kumar

1

1

Could you please add some example or code for how to do this? – tomsv Sep 28 '13 at 11:15

Stephen Hazel · Answer 4 · 2015-12-05T18:59:11.177

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.

score 0 · Answer 5 · answered Feb 22 '12 at 22:12

0

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

answered Feb 22 '12 at 22:12

GGD4V

265
3
8

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. – agrublev Feb 22 '12 at 22:14
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 – AlexIIP Feb 22 '12 at 22:23
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. – AlexIIP Feb 22 '12 at 22:25

score 0 · Answer 6 · answered Feb 24 '12 at 17:41

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;
}

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

6 Answers6