1

I used fontsquirrel to download webfonts but the letter spacing doubles on the iPhone. I tried enabling "remove kerning" in the fontsquirrel settings but that doesn't work.

@font-face {
font-family: 'fjalla_oneregular';
src: url('../../core/texts/fjallaone-regular-webfont.eot');
src: url('../../core/texts/fjallaone-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('../../core/texts/fjallaone-regular-webfont.woff2') format('woff2'),
     url('../../core/texts/fjallaone-regular-webfont.woff') format('woff'),
     url('../../core/texts/fjallaone-regular-webfont.ttf') format('truetype'),
     url('../../core/texts/fjallaone-regular-webfont.svg#fjalla_oneregular') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;

}

.post-header h1 {
    font-family: "fjalla_oneregular", Impact, Helvetica Neue, Helvetica, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #191919;
    letter-spacing: 0px;
}

Is there a workaround to make the spacing match between desktop browsers and mobile?

user300979
  • 389
  • 1
  • 4
  • 18

1 Answers1

1

That can be a confusing and tough problem to find the solution for. Try moving the SVG URL line before the EOT URL line. It appears that Chrome utilises the .svg file in the @font-face kit, and doesn’t like being called last. Below is the standard call for @font-face using CSS:

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

As can be seen in the example, the .svg file comes last in the list of called URLs. If we amend the code to target webkit browsers, then tell them to solely utilize the .svg file.

@font-face {
  font-family: 'chunk-webfont';
  src: url('../../includes/fonts/chunk-webfont.eot');
  src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
  url('../../includes/fonts/chunk-webfont.woff') format('woff'),
  url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
  url('../../includes/fonts/chunk-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {font-family: ‘chunk-webfont’;
  src: url(‘../../includes/fonts/chunk-webfont.svg’) format(‘svg’);
}

I was using a typeface and the same code from FontSquirrel and recently after the iOS 10 update a few of my sites were all broken with incorrect font spacing.

See Font Face Chrome Rendering for reference (Big thanks to Sam Goddard for that post!)

clearlight
  • 12,255
  • 11
  • 57
  • 75
CWARRENT
  • 26
  • 2
  • link-only answers are frowned-upon at StackOverflow. Links expire or the content can change. Please embody the crucial elements of the solution into your answer whenever possible so the answer stands on its own and provides direct value. Also - mostly just code solutions and salient explanations - no need to tell too much story. The nerds want to cut to the chase, fix the problem and move on. I edited your answer accordingly. – clearlight Nov 29 '16 at 17:58
  • Apologies. I basically signed up to Stackoverflow just to make this known to others in case it would help. Appreciate your time too. – CWARRENT Dec 01 '16 at 14:56
  • No worries. Thanks for doing that. Took me awhile to learn the expectations and why they're there. This just helps for next time :-) – clearlight Dec 01 '16 at 22:54