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

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -