Good afternoon,
Everyone has been very helpful in the past with the issues we’ve encountered and assisting in the rectification of our problems. I have a question about the display of font for mobile devices, specifically on Android phones that might be a bit older. I’ll elaborate a bit.
The program that produces the journal that we host on our server through OJS has noticed that on specific devices, notably older Android phones, when visiting the site for the journal the font is almost illegible and appears as a thin, grey looking font. On newer devices and Apple products, the font appears crisp and black, making it visible and usable. The question is whether or not we can edit any of the CSS for mobile device displaying that would allow for better font visibility on all mobile platforms? If not all mobile platforms, could it be put in the CSS to display just a better font for Android devices?
TL;DR - Font displays grey, thin on older Android phones. Can we change the CSS to make it more legible on all devices or even just older Android phones?
Thanks for all your help,
Charles C. Myers Library
Hi @charlescmyers
You may set fonts in CSS to different screen devices, but, open till now, it is not, or there is not, a know way to sniff Android version with CSS Media query.
If you need set a font (family, size, weight, etc…) I suggest you use CSS Media queries. You may get further info from this link:
http://cssmediaqueries.com
Hope it helps.
Regards,
Israel Cefrin
Public Knowledge Project Team
Thank you for the information. I know there’s a few different sheets for the site available. I would make these changes on the common.css file?
Thank you again for the help.
Hi
You can add a customized style shhet in Journal Management > Journal Setup > Step 5. Customizing the Look
Section 5.6 Journal Layout and upload a CSS file with your adjustments.
Regards,
Israel Cefrin
Public Knowledge Project Team
Hello again,
After fussing about with media queries and attempting to get the font type (at the very least) to change, I’m noticing that I’m not getting anywhere with the additional CSS file attached in Section 5.6.
What’s happening is that, on Android devices specifically, the font type specified in the @media screen or @media doesn’t affect what types of font the phone will display. After looking through a few unrelated posts on stackexchange (to see what I was doing wrong) it looks as though Android phones used to utilize only three different types of fonts: serif, sans-serif, and Droid Sans. I’m not sure if that’s still correct and accurate currently but I have no way to test that besides updating the CSS sheet or boostrap CSS and seeing what changes take effect on the Android phones to gauge whether or not I’m getting it to work.
If anyone has any suggestions on what I might be able to do, I would be all ears. Here’s the code I’m currently attempting to use:
@media screen {
#sidebar,
#leftsidebar,
#sidebarNavigation,
#content
{font-family: serif;}
}
Thank you for your help thus far.
EDIT: As an additional, I’ve attempted to use font-family: Times New Roman or font-family: Georgia, serif; with nothing being affected either. I’ve also attempted to use it without the content limiters, #sidebar, #leftsidebar, etc.