On iPhone SE 3rd GEN application font defaults to serif (Times New Roman or similar)

[PolishPianist]

On both Chrome and Safari the app seems to display serif font, making it extremely difficult to use, even with the font enlarged.

[artyom-beilis]

Honestly I don't understand why is it hard to use... Serif fonts look perfectly nice (while indeed it should be sans)

I don't own iPhone myself. I hope one of the users who know JavaScript/CSS can submit me a fix.

[PolishPianist]

Thank you for replying. It may look nice when your vision is good and your phone screen is big enough. That is not my case unfortunately. And I'd love to use and contribute to this great app. While I'm not versed in programming, I got this snippet from ChatGPT. Maybe it will be useful. Maybe not. So here it is:

To solve the issue of the default serif font on your iPhone when accessing the Astrohopper web app, you can provide the author with a small CSS snippet that forces the application to use a more readable sans-serif font across the app. This can be applied globally, ensuring that the text is more accessible on smaller screens like your iPhone. Here's a simple CSS code snippet that you can provide to the author:

/ Force a default sans-serif font across the web app / body, html, p, h1, h2, h3, h4, h5, h6, div, span, a, li, ul, input, button, label { font-family: Arial, Helvetica, sans-serif !important; font-size: 16px; line-height: 1.5; }

/ Adjust font sizes for better readability on small screens / @media only screen and (max-width: 600px) { body, html { font-size: 14px; } }

Explanation:

• Global Font Application: The font-family: Arial, Helvetica, sans-serif !important; rule is applied to all common HTML elements, ensuring that a sans-serif font like Arial or Helvetica is used consistently.
• Font Size and Line Height: The font size is set to 16px for readability, with a line height of 1.5 for better spacing between lines. This can be adjusted depending on preference.
• Responsive Design: The @media query ensures that on smaller screens (like your iPhone), the font size is slightly reduced to 14px to fit the content better without compromising readability. This CSS code can be included in the global stylesheet of the Astrohopper web app, making the font more readable on all devices. The author could easily add this to the existing CSS file or in a new stylesheet linked to the web app.

I can further refine it in my GPT chat thread if necessary.

[artyom-beilis]

I got this snippet from ChatGPT. Maybe it will be useful...

You know what is the problem?

• there is virtually 0 trust to chatgpt - since it can bring your rubbish.
• I understand that all I need to add is correct css/font in right place
• The problem is that I need iPhone to test that it actually works :-)

[PolishPianist]

I see. I don't know how all these projects work here on github, but if you wanted - I coud be a beta-tester with an iPhone if you ever make these changes :-)