Search code examples
cssmobilebrowserfont-faceletter-spacing

@font-face letter spacing looks wider only on mobile browser

I am hosting a font using @font-face, and have set up a media query where the font size will shrink when the screen size hit (<) a certain width.

On PC, it looks all fine across the browsers. But I think the letter-spacing did not scale down correspondingly as the font-size shrinks in mobile devices. I have checked on chrome, safari, and firefox on an iPhone, and all letter-spacing seems to be wider than it should be.

I've been searching for solutions, and I've tried:

  1. using rem, em in CSS
  2. using letter-spacing: normal in the child element
  3. switching from font shrinking to font enlarging using reversed codes of media query

Here are some CSS codes for your references.

@font-face {
  src: url(fonts/gilroy-extra-bold.ttf);
  font-family: gilroy-extra-bold;
}

/* h1 font CSS*/
h1 {
  font-family: gilroy-bold;
  color: #3F3F3D;

  font-size: 1.56em;
  text-align: center;
  letter-spacing: 0.001em;
}

/* when the font shrinks */
@media only screen and (min-width: 800px) {

  /* h1, 2, 3 text enlarge and shrink */
  h1 {
    font-size: 2.5rem;
  }

it looks something like this on PC: example

but, on mobile: e x a m p l e (you get the idea..)

I know browser renders fonts differently, and I have been told to use "web-safe" fonts to avoid all the hassle. But are there a work-around with using @font-face? JS?

Solution

  • What if you use px instead and adjust the value according to the screen size? 

    h1 {
  font-family: gilroy-bold;
  color: #3F3F3D;
  font-size: 1.56em;
  text-align: center;
  letter-spacing: .5px;
}

@media only screen and (min-width: 800px) {
  h1 {
    font-size: 2.5rem;
    letter-spacing: 1px;
  }
}