Geek Answers Handbook

JQuery Mobile - override full body font themes

I recently added jQuery mobile to my website.

However, the jQuery theme violated my previous fonts. Although most of my page works fine, especially the nice jQuery Mobile sliders, I have a real font problem.

I have custom fonts and they work correctly without jQuery mobile css. However, when I turn on jQuery mobile css, it overrides my fonts.

I tried adding data-role = "none" to the body and div, but that didn't help.

I also tried adding data-theme = "none", but that also doesn't help.

Is there a way to disable a custom jQuery themed font family in the body of my page?

Thanks for the help.

+7
source share
6 answers

Here is my CSS to replace the font of the entire application with Roboto, the ICS font of Android 4.0.

@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 need to target certain items if the above is not enough. I should also have included 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"; }

Hope you get better. Good luck.

+9
source

I would check the element and find out exactly where the fonts are indicated, for example, I just found that the font is listed here:

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

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

+1
source

From what I understand ... jQuery mobile can just send its own CSS fonts to your mix. If you have a css file with a set of fonts:

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

Hope this helps you figure out the solution :)

0
source

Thanks to the help of 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; }
0
source

Create your own css for jQuery mobile and override the font family to provide your own font family.

0
source

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

set the font on the "global" tab (for me: Raleway, Verdana, etc.), download and install the theme, and you are set up. For jqmobile you need to use your css, jqm icons and jqm structure INSTEAD themes from a regular single jqm css.

overriding material in css can cause you various problems with different browsers ... And this is NOT an item with jquerymobile.

0
source

More articles:


All Articles