ios - Letter spacing doubles for font-face fonts on iPhone -
i used fontsquirrel download webfonts letter spacing doubles on iphone. tried enabling "remove kerning" in fontsquirrel settings 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 workaround make spacing match between desktop browsers , mobile?
that can confusing , tough problem find solution for. try moving svg url line before eot url line. appears chrome utilises .svg file in @font-face kit, , doesn’t being called last. below standard call @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 seen in example, .svg file comes last in list of called urls. if amend code target webkit browsers, tell them solely utilize .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 , (-webkit-min-device-pixel-ratio:0) { @font-face {font-family: ‘chunk-webfont’; src: url(‘../../includes/fonts/chunk-webfont.svg’) format(‘svg’); }
i using typeface , same code fontsquirrel , after ios 10 update few of sites broken incorrect font spacing.
see font face chrome rendering reference (big sam goddard post!)
Comments
Post a Comment