Custom font not working on iOS even when using all formats possible - html

Question

I'm trying to use the Gill Sans-Light font on my website, but for some reason I can't seem to make the font work on iOS devices only. To demonstrate what I mean, here's a screenshot of the same font when I open my website in an Android phone, and when I open it in an iOS phone.
Android:
iOS:
Yes, I know there are lots of questions in here about this particular problem, I've read through them all but I can't seem to make my font work no matter what solution I use.
If it helps, I used Transfonter to convert the font format to EOT, WOFF2, WOFF, TTF and SVG.
Here's my code:
#font-face {
font-family: 'Gill Sans';
src: url('../fonts/GillSans-Light.eot');
src: url('../fonts/GillSans-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/GillSans-Light.woff2') format('woff2'),
url('../fonts/GillSans-Light.woff') format('woff'),
url('../fonts/GillSans-Light.ttf') format('truetype'),
url('../fonts/GillSans-Light.svg#GillSans-Light') format('svg');
font-weight: 300;
font-style: normal;
}
Thank you for your help.

Answer 1

iOS and macOS both include Gill Sans as a system font, so you are probably getting the default Regular weight of that, rather than your hosted version.
One option would be to intentionally use the system version on platforms that have a font called Gill Sans installed:
#font-face {
font-family: 'Gill Sans';
src: local('GillSans-Light'),
url('../fonts/GillSans-Light.woff2') format('woff2'),
url('../fonts/GillSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
A more predictable option, especially for a typeface like this where there are many different “cuts” or digital versions, is to change the font-family name to something less likely to conflict with a system font. For example:
#font-face {
font-family: 'Example family name';
src: url('../fonts/GillSans-Light.woff2') format('woff2'),
url('../fonts/GillSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
h1 {
font-family: 'Example family name', GillSans-Light, sans-serif;
font-weight: 300;
font-style: normal;
}
Obligatory further reading: https://en.wikipedia.org/wiki/Eric_Gill