Microsoft Sitka font not working on chrome and firefox

Question

I have added sitka banner and sitka display fonts to a website that I'm currently working on. But the font is not rendering and I get following error:

Failed to decode downloaded font: http://localhost:8080/design/fonts/SitkaBanner-BoldItalic.woff 2016-05-16 16:33:43.133 (index):1

OTS parsing error: OS/2: Failed to read version 5-specific fields

This is common with every file type. Below is my font face code:

@font-face {
    font-family: "banner";
    src: url("fonts/SitkaBanner-BoldItalic.eot");
    src: url("fonts/SitkaBanner-BoldItalic.eot?#iefix") format("embedded-opentype"),
    url("fonts/SitkaBanner-BoldItalic.woff") format("woff"),
    url("fonts/SitkaBanner-BoldItalic.woff2") format("woff2"),
    url("fonts/SitkaBanner-BoldItalic.ttf") format("truetype"),
    url("fonts/SitkaBanner-BoldItalic.otf") format("opentype"),
    url("fonts/SitkaBanner-BoldItalic.svg") format("svg");
}

I'm on a PC and this is working fine on safari browser(windows). Help is appreciated.

Safari on Windows hasn't been supported in years - I'd consider it working there to be pure luck. — scunliffe, May 16 '16 at 12:02
Out of curiosity...where did you get a version of Sitka that Microsoft allows for use as a webfont? Maybe that has something to do with it? — djangodude, May 16 '16 at 21:21
step 1: as per http://stackoverflow.com/a/37091681/740553, "just use WOFF'. Ditch **all** those other formats. Except perhaps WOFF2. That said: you are *absolutely not allowed to use Sitka as a webfont*. Just because someone illegally uploaded the files to github doesn't mean you can therefore use them. You'll have to buy it, and when you do, you'll have to buy it with a webfont license. And when you do, it'll just work. — Mike 'Pomax' Kamermans, May 17 '16 at 00:51

score 3 · Accepted Answer · answered Jul 17 '16 at 17:24

3

That’s because Sitka contains a special OpenType Table, the version 5 OS/2 table, which contains two special fields: usLowerPointSize and usUpperPointSize, which are used for optical sizes. Chrome’s font loader does not support these fields.

answered Jul 17 '16 at 17:24

Belleve Invis

116
5

Is there anyway to get Sitka Banner working in a TTF format? I have the .ttf file loaded into my website using @font-face. It loads on Windows browsers, just not on a Mac browsers. – the12 Nov 29 '16 at 07:13

mark stewart · Answer 2 · 2017-05-30T02:26:21.480

A year later and still the same issue with the case of the disappearing CSS coded @font-face... near any Mathew Carter blessed Foundry. It's getting worse. Listening to TED.com Ted Talks shows I picked up on the fail. It relates to W3 transition to vector, where PNG overlays slip out a pixel, only corrected by SVG substitution. Carter's typefaces all play on anti-alias, with an unmatched industrial precision. Looking more closely at his notorious Skia font, and watching fontd and launchd in Activity Monitor, his fonts are busy, in part due to Apple and Microsoft encrypted protection. Also, because background vector translation is adapting anti-alias. Carter's fonts are the perfect system stressors. He avoids Straight-Edge anything like the plague. This further complicates system migration away from pixel based display, to vector based graphic associations. If you save a Sitka or Skia or any of Carter's fonts from Apple RTF to HTML, fonts [curves] are coded thus:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <meta name="Generator" content="Cocoa HTML Writer">
  <meta name="CocoaVersion" content="1504.83">
  <style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 64.0px Skia}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Verdana}
    p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 36.0px Skia}
    p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; font: 36.0px 'Skia Light'}
    p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; font: 36.0px 'Skia Condensed'}
    span.s1 {font: 36.0px Skia}
  </style>
</head>
<body>
<p class="p1">Skia</p>
<p class="p2">Do not edit this document. It is only for viewing.</p>
<p class="p3">Skia regular</p>
<p class="p4">Skia light</p>
<p class="p3"><b>Skia bold</b></p>
<p class="p3"><b>Skia black</b></p>
<p class="p3">Skia extended</p>
<p class="p3">Skia light extended</p>
<p class="p3"><b>Skia black extended</b></p>
<p class="p5">Skia condensed</p>
<p class="p3">Skia light condensed</p>
<p class="p5"><b>Skia black extended</b><span class="s1"><b><span class="Apple-converted-space"> </span></b></span></p>
</body>
</html>

This nothing like an SVG graphic, with blocks full of of transforms and transitions. Open above in code editor, add a single space, the system reacts. The font display in Safari corrupts, code fails to call up font face. Apple higher-up support, watching this happen with me using a shared screen. The fonts are encrypted for system-only use, which is somehow blocking display. Fontlab processing Skia's 678 Kb to extract type faces, we get only one 65 Kb Skia-Regular.ttf. Complete, not cut, like freely distributed Skia font at 101fonts.com. But only one typeface available, Regular. Can't bust through Apple's encryption. Apple is aware of the related style collapse in local documents, but "We don't know what to do." Sure!

Another symptom of vector paralysis is using a Carter standard like Verdana or Georgia with JPG or PNG files, too often the system cannot display the graphic in the local web page, resources tied down 'vectoring' the typographic curves. Apple again, says "Check your fonts." Check them and... what? Is TTF going the way of GIF dinosaurs? SVG font replacements?

Microsoft Sitka font not working on chrome and firefox

2 Answers2