WOFF and WOFF2 files missing with 4.0.0 release

[ChetanGandhi]

Hi, first of all thanks for creating such a beautiful icon library.

Can you please confirm that support for WOOF and WOOF2 files is dropped with the latest release, 4.0.0 ?

Correct me if I am wrong, OTF files are full system font file (to be used as desktop operating system font) and not as web font. Is it ok to, somehow, convert the OTF files to WOOF2 format and use them instead?

Thanks.

[ytxmobile98]

I am using Ubuntu.

ttf / otf → woff

The ttf / otf → woff utility is woff-tools.

$ sfnt2woff path/to/otf.otf

This will create the woff file in the same directory as the otf file.

ttf / otf → woff2

The ttf / otf → woff2 utility is woff2.

$ woff2_compress path/to/otf.otf

This will create the woff2 file in the same directory as the otf file.

These two utilities provide convenient command-line conversions to the desired formats.

[ChetanGandhi]

@ytx21cn Thanks for the details, this will unblock me for now.

Though I will still wait for a official confirmation that support for WOOF/WOOF2 files is dropped. The official documentation still refers to old release and is using WOOF/WOOF2 file. In case next update fixes this, then I will have to refactor my implementation, again.

[yuvalbl]

@ChetanGandhi is correct, The docs are out of date. This is from the official docs

@font-face {
  /*...*/
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

But no woff2or woff included in the repo. Moreover, link to icon font assets result in 404

[Download]

See #1050

[RoelN]

Thanks for this issue and the replies, and apologies for the slow updates. Thanks for bearing with us.

We're gathering all feedback and suggestions regarding updating the npm package in a central issue: https://github.com/google/material-design-icons/issues/1129 Please have a look and see if the package, as published in the way suggested there, would suit your needs.

[zijianhuang]

The workaround is to follow the links in https://github.com/google/material-design-icons/blob/master/font/README.md

Then browse one of the links you want like: https://fonts.googleapis.com/css2?family=Material+Icons

Then in the CSS returned, follow the woff2 link, like: https://fonts.gstatic.com/s/materialicons/v76/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2

Then you get woff2 for local hosting. And you may either keep the hashed name, or rename to something like MaterialIcons-Regular.woff2

[adamreisnz]

The workaround does not give you the WOFF file though (woff 1) for older browsers.

[Zerounodue]

woff: https://fonts.gstatic.com/s/materialicons/v113/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff woff2: https://fonts.gstatic.com/s/materialicons/v113/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2

if you open https://fonts.googleapis.com/css2?family=Material+Icons with IE11 on windows 7 you will get the woff link

[optyler]

I needed the regular and outlined fonts, to do so : I opened https://fonts.googleapis.com/css?family=Material+Icons%7CMaterial+Icons+Outlined I went to chrome dev tools, Cmd+Shift+p and searched for Network conditions. I changed the user agent for Edge, FF, Chrome, Android, ...

Here is the condensed css of all those links I could get this way and the CSS.

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(./flUhRq6tzZclQEJ-Vdg-IuiaDsNY.eot);  /* For IE6-8 */
  src: url(./flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff) format('woff'),
    url(./flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2'),
    url(./flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf) format('truetype');
}

/* fallback */
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(./gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUca.eot);  /* For IE6-8 */
  src: url(./gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcY.woff) format('woff'),
        url(./gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcel5euIg.woff2) format('woff2'),
        url(./gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcd.otf) format('opentype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';  
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

Wgets to get those files

wget "https://fonts.gstatic.com/s/materialicons/v118/flUhRq6tzZclQEJ-Vdg-IuiaDsNY.eot"
wget "https://fonts.gstatic.com/s/materialicons/v118/flUhRq6tzZclQEJ-Vdg-IuiaDsNa.woff"
wget "https://fonts.gstatic.com/s/materialicons/v118/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"
wget "https://fonts.gstatic.com/s/materialicons/v118/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf"
wget "https://fonts.gstatic.com/s/materialiconsoutlined/v92/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUca.eot"
wget "https://fonts.gstatic.com/s/materialiconsoutlined/v92/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcY.woff"
wget "https://fonts.gstatic.com/s/materialiconsoutlined/v92/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcel5euIg.woff2"
wget "https://fonts.gstatic.com/s/materialiconsoutlined/v92/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcd.otf"

[dlarr]

The workaround is to follow the links in https://github.com/google/material-design-icons/blob/master/font/README.md

Then browse one of the links you want like: https://fonts.googleapis.com/css2?family=Material+Icons

Then in the CSS returned, follow the woff2 link, like: https://fonts.gstatic.com/s/materialicons/v76/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2

Then you get woff2 for local hosting. And you may either keep the hashed name, or rename to something like MaterialIcons-Regular.woff2

This worked.

I dont know why but I could'nt make it work with ttf and otf extension files :(

[tphinney]

TTF files are right here in the repo

We don’t have OTF font versions here in the repo; they are not quite as versatile as TTFs in terms of browser support (in ancient browsers only), and there isn’t a well-supported variable font flavor of OTF.