cssmobilefontsresponsive

Why web site font shrinks on mobile Chromium-based browsers and how to fix it?


I am using 'Coolvetica Regular' for my headings. It works ok on different browsers on my PC, but on mobile it looks weird on every mobile browser that is based on Chromium (Chrome, Edge, Kiwi).

And by weird I mean that letter-spacing between words isn't handled correctly on mobile. This font was also used on this portfolio web site and I didn't see this problem there.

What should I do to fix this problem? Is there any way to only add letter-spacing to mobile Chromium-based browsers?

Code, Chrome, and Firefox on desktop

Chrome, Edge, Kiwi, Firefox on mobile


Solution

  • This is the best solution I could come up with. I saw this question on StackOverflow and tried to implement it for my own scenario. On the desktop, it worked correctly and could differentiate between Chrome and Firefox, but on the mobile, it didn't differentiate between Firefox and other Chromium-based browsers.

    Overall I'm happy with the result and I don't think this issue worths the time and effort as @Rene suggested in a comment above.

    Here's what I added at the end of my CSS to fix this issue:

    h1, h2 {letter-spacing: 0;}
    @media screen and (max-width: 480px) { 
      .selector:not(*:root), h1, h2 {
        letter-spacing: 0.04em;
      }
    }