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.
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.