1

Page URL: http://seasia.kinsta.cloud/static/home-free-subscriber.html

I have used custom fonts on this page using @font-face. It's working fine on all desktop browsers, and also on Android browsers. Fonts are not loading only on iOS (iPhone and iPad) on Firefox and Chrome browsers. Working fine on Safari on iOS.


I have tried adding .htaccess file as suggested here on another discussion.

Also tried font smoothing properties as suggested here: https://github.com/grillitype/web-fonts-guide#font-smoothing

But it didn't help.


Following is the code I have used in CSS for @font-face

@font-face {
font-family: "GT America Black";
src: url("../fonts/gt-america/GT-America-Standard-Black.eot");
src: local("GT America Black"), 
     local("../fonts/gt-america/GT-America-Standard-Black"), 
     url("../fonts/gt-america/GT-America-Standard-Black.eot?#iefix") format("embedded-opentype"), 
     url("../fonts/gt-america/GT-America-Standard-Black.woff2") format("woff2"), 
     url("../fonts/gt-america/GT-America-Standard-Black.woff") format("woff"), 
     url("../fonts/gt-america/GT-America-Standard-Black.ttf") format("truetype");
font-weight: 900;
font-style: normal;
font-stretch: normal; }

@font-face {
font-family: "GT America Light";
src: url("../fonts/gt-america/GT-America-Standard-Light.eot");
src: local("GT America Light"), 
     local("../fonts/gt-america/GT-America-Standard-Light"), 
     url("../fonts/gt-america/GT-America-Standard-Light.eot?#iefix") format("embedded-opentype"), 
     url("../fonts/gt-america/GT-America-Standard-Light.woff2") format("woff2"), 
     url("../fonts/gt-america/GT-America-Standard-Light.woff") format("woff"), 
     url("../fonts/gt-america/GT-America-Standard-Light.ttf") format("truetype");
font-weight: 100;
font-style: normal;
font-stretch: normal; }
Alok Jain
  • 3,379
  • 3
  • 23
  • 42

0 Answers0