CODEWITHSUNDEEP
ioscssiphonefont-face
user300979
user300979

Reputation: 437

Letter spacing doubles for font-face fonts on iPhone

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?

Upvotes: 2

Views: 2195

Answers (1)

CWARRENT
CWARRENT

Reputation: 36

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!)

Upvotes: 2

Related Questions