All geek questions in one place

Failed to decode OpenType Roboto

I followed the instructions in google / roboto repository , but OTF file cannot be used as webfont.

The only feedback I can get is that Chrome says that it was not possible to decode the downloaded font.

OTS says that everything is in order.

Why is this and how can I use Robot opentype features on the Internet?

FYI I also opened google / roboto # 283

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

+5
source share
3 answers

Update (based on updated question)

Apparently, the generated OTF font is incorrectly encoded for the Internet - all browsers have different font rendering mechanisms, and decoding of this file fails in Chrome and Firefox, and even Font Squirrel reports. The font is damaged and cannot be converted. Oddly enough, Safari works great.

If you want to use the features of the Roboto font, you will have to create your own web fonts. I created a demo page demonstrating some features of the Roboto font with various web fonts ( woff2 , woff , otf , ttf ) by following these steps:

After running make in the google / roboto repository, you should get the TTF fonts in the RobotoTTF directory. These files include all the features of the Roboto font, and you can use them to create web font files. If you want, you can even use 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 font formats ( woff2 gives better results and is supported in all modern browsers ) to significantly reduce the file size, so your @font-face ad will:

 @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 also enable and use the font features in the generated web fonts 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, which work pretty well, preserving the OpenType features in the generated web fonts:

On the side note you can find LCDF Typetools , especially otfinfo use as otfinfo -f Roboto-Regular.ttf list of all the functions supported by the font.

Here are the features for the Roboto font:

  • c2sc - Small capitals from capitals
  • ccmp - Composition / decomposition of glyphs
  • cpsp - Capital Space
  • dlig - discretionary ligatures
  • dnom - denominators
  • Fraction - Fractions
  • kern - kerning
  • liga - Standard Ligatures
  • lnum - Lining
  • mark - Mark Positioning
  • mkmk - Mark to mark positioning
  • numr - Numerals
  • onum - Old figures
  • pnum - Proportional Indicators
  • salt - stylistic alternatives
  • 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 data
  • unic - unicase

Hope you find this helpful.

** Deleted as not relevant to the updated question

+1
source

Building a font from a Roboto repo really results in an invalid font. As you installed, Chrome (and Firefox) reject it. Fontforge fontlint throws a lot of errors when checking this OTF Roboto. Among many, due to mismatch in adavance widths, this conclusion:

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

These errors only indicated glyphs that were broken, but this should not cause Chrome to reject the font at all.

For fun, I got up to see what exactly breaks the font. After some tracking, I found two entries in the CFF table, which apparently make for an invalid font:

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

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

About using OpenType functions: many layout functions can be enabled using CSS, provided they are, of course, in the font. You can write CSS yourself (for example, font-feature-settings: "liga"; to enable ligatures) or use a handy cross-browser CSS library such as Utility OpenType .

+1
source

Do not use otf , ttf , svg or eot on the Internet. The first two are universal OpenType fonts with more data than is necessary for browsing the Internet, including data that is specification but will be rejected by overly protective parsers such as OTS, and the last two have been dead formats for many years and should never be use.

Pack the original source (otf or ttf, the choice of which doesn’t matter if you don’t know why it matters, which would mean that you are familiar with the OpenType internals)) as a WOFF or WOFF2 font with something like google utility woff2 or TTX , and then just use this, and only this:

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

And everything should work fine.

0
source

Source: https://habr.com/ru/post/1274346/

More articles:


All Articles