I have an issue with a font not being rendered correctly at all on iOS and MAC OSX. It renders correctly everywhere else I've tried, including a brand-new virtual Windows 7 machine.
It's really starting to grind my gears.
Here's my CSS for defining the font.
@font-face {
font-family: 'Knockout';
src: local('☺'),
url('Fonts/knockout.otf') format('otf'),
url('Fonts/knockout.woff') format('woff'),
url('Fonts/knockout.ttf') format('truetype'),
url('/Fonts/knockout.svg#Knockout') format('svg');
font-weight: normal;
font-style: normal;
}
For the legacy SVG file, here's the header:
<defs>
<font id="Knockout" horiz-adv-x="269" >
<font-face
font-family="Knockout"
font-weight="500"
font-stretch="normal"
units-per-em="1000"
And here's the LESS/CSS styling for the actual class where the font needs to be applied:
.header
{
position: absolute;
top: 0;
font-family: 'Knockout';
color: @ColorTealD;
font-size: 10vw;
pointer-events: none;
text-rendering: optimizeLegibility;
}
As far as StackOverflow links I've visited:
@font-face not working in mobile Webkit
I also visited a link that suggested using the smileyface trick, and another one that suggested prefacing the SVG URL with a '/'. I also wiped the Safari cache on my iPhone. I need to emphasize that this font appears in other browsers, including completely wiped virtual machines. Switching fonts isn't an option at this point, because $500 has been forked over for licensing.
Anyone have any ideas on what else I could do, to fix this? I'm pretty sure the next steps involve throwing a virgin into a volcano or bloodletting a goat.
