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

Question

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:

using rem, em in CSS
using letter-spacing: normal in the child element
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?

Do you have the same problem using the default font for `h1`? — Tom, Aug 12 '19 at 13:53
Thanks, Tim. I just checked and when I use the default font, the letter spacing DOES look the same on mobile compared to PC. does it mean that I can't use this custom font...? — Display-None, Aug 12 '19 at 14:05
Try the approach I chose below, if nothing changes, there's probably a problem with your font - what's kind of weird, since I've used Gilroy before and have never happend to have the same problem. — Tom, Aug 12 '19 at 14:07

score 2 · Answer 1 · answered Aug 12 '19 at 14:49

I re-download my fonts and re-write the codes as so:

@font-face {
  font-family: gilroy-bold;

  src: 
  url('fonts/Gilroy-Bold.woff2') format('woff2'),
  url('fonts/Gilroy-Bold.woff') format('woff'),
  url('fonts/Gilroy-Bold.ttf') format('truetype');

  font-weight: 700;
  font-style: normal;
}

and it worked now!

score 0 · Accepted Answer · answered Aug 12 '19 at 14:02

0

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;
  }
}

answered Aug 12 '19 at 14:02

Tom

3,672
6
20
52

Thank you. I tried but it didn't seem to be the fix. – Display-None Aug 12 '19 at 14:20
I figured out now. Thanks, Tim! – Display-None Aug 12 '19 at 14:46
1

you were talking about you used Gilroy before and I thought it maybe something to do with my font file, so i re download mine and update my @font-face as so: – Display-None Aug 12 '19 at 14:47
``` @font-face { font-family: gilroy-bold; src: url('fonts/Gilroy-Bold.woff2') format('woff2'), url('fonts/Gilroy-Bold.woff') format('woff'), url('fonts/Gilroy-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; } and it worked! – Display-None Aug 12 '19 at 14:47

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

2 Answers2