fontswebfontsopentyperoboto

Failed to decode OpenType Roboto


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_


Solution

  • 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:

    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:

    I hope you'll find this helpful.

    ** Deleted as not relevant to the updated question