Failed to decode OpenType Roboto

Question

I followed instructions on the google/roboto repository, but no OTF file can be used as webfont.

The only feedback I can get is Chrome saying Failed to decode downloaded font.

OTS says everything is fine.

Why is that and how can I use Roboto opentype features on the web?

FYI I also opened google/roboto#283

Here is one of the generated fonts: https://drive.google.com/open?id=157_-UBTyswylqY3DOK-mKihd7Vk-vFA_

Answer 1

Update (based on the updated question)

Apparently the generated OTF font is not encoded properly for the web — all browsers have different font rendering engines and the decoding of this file fails in Chrome and Firefox, and even Font Squirrel reports The font is corrupt and cannot be converted. Funnily enough works just fine in Safari.

If you want to use the Roboto font features you'll have to generate your own web fonts. I have created a demo page that demonstrates some of Roboto's font features, with various web fonts (woff2, woff, otf, ttf) going through the following steps:

Once you run make with the google/roboto repository you should get the TTF fonts in the RobotoTTF directory. These files include all of Roboto's font features, and you can use them to generate your web fonts files. If you wish you can even use the TTF fonts:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url('./Roboto-Regular.ttf') format('truetype');
}

although your file size will be large and you should definitely convert them to other web fonts formats (woff2 yields best results and it's supported in all modern browsers) to decrease the file size significantly, so your @font-face declaration would be:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url('./Roboto-Regular.woff2') format('woff2');
}

You can still include and use font features in the generated web fonts too, and use them in your CSS code:

.yourclass {
  font-feature-settings: ...;
}

There are many tools you can use, online and on your computer. I tried the following ones which work pretty nice with keeping the OpenType Features within the generated web fonts:

• The already mentioned onlinefontconverter — you can choose to generate various fonts and web fonts formats
• Font Squirrel Webfont generator — make sure you select Expert option, and under OpenType Features select Keep All Features

On a side note, you may find LCDF Typetools useful, specifically otfinfo use as otfinfo -f Roboto-Regular.ttf to list all the features supported by a font.

Here's the list of the features for the Roboto font:

• c2sc — Small Capitals From Capitals
• ccmp — Glyph Composition/Decomposition
• cpsp — Capital Spacing
• dlig — Discretionary Ligatures
• dnom — Denominators
• frac — Fractions
• kern — Kerning
• liga — Standard Ligatures
• lnum — Lining Figures
• mark — Mark Positioning
• mkmk — Mark to Mark Positioning
• numr — Numerators
• onum — Oldstyle Figures
• pnum — Proportional Figures
• salt — Stylistic Alternates
• smcp — Small Capitals
• ss01 — Stylistic Set 1
• ss02 — Stylistic Set 2
• ss03 — Stylistic Set 3
• ss04 — Stylistic Set 4
• ss05 — Stylistic Set 5
• ss06 — Stylistic Set 6
• ss07 — Stylistic Set 7
• tnum — Tabular Figures
• unic — Unicase

I hope you'll find this helpful.

** Deleted as not relevant to the updated question

Answer 2

Building the font from the Roboto repo does indeed produce an invalid font. As you established, Chrome (and Firefox) reject it. Fontforge's fontlint produces a lot of errors when this OTF of Roboto is checked. Among many about mismatching adavance width, it's conclusion is:

ERROR      2 Self-intersecting glyph
ERROR      3 Wrong direction
ERROR      5 Missing points at extrema
FAIL         Roboto-Regular.otf

These errors only seemed to point to glyphs that were broken, but that shouldn't make Chrome reject the font altogether.

For fun I dove in to see what exactly breaks the font. After some sleuthing, I found two entries in the CFF table that apparently make for an invalid font:

<FamilyBlues value="0"/>
<FamilyOtherBlues value="0"/>

Removing these will fix the font. (I'll add this to the issue you reported)

About using OpenType features: a lot of layout features can be enabled through CSS, if they're in the font of course. You can write the CSS yourself (e.g. font-feature-settings: "liga"; to enable ligatures), or use a handy cross-browser CSS library like Utility OpenType.

Answer 3

Don't use otf, ttf, svg, or eot fonts on the web. The first two are universal OpenType fonts with way more data than necessary to work on the web, including data that is spec-legal, but will get rejected by overly protective parsers like OTS, and the latter two have been dead formats for years now and should never be used.

Pack the original source (otf or ttf, the choice of which doesn't matter unless you know why it does matter, which would mean you're pretty familiar with the internals of OpenType)) as a WOFF or WOFF2 font with something like google's woff2 utility or TTX, and then just use that, and only that:

@font-face {
  font-family: Roboto;
  src: url(./assets/myfonts/roboto.woff2) format("woff2");      
}

And things should work just fine.