Css font-face using ttc file

You can't use font collections for CSS @font-face declarations as the purpose of this syntax is to, unambiguously, specify which single font resource must be used by the browser when you specify some specific combination of font-{family, weight, style, etc} in your actual page CSS.

Specifying a font collection makes this impossible: there is no syntax to specify which font inside that collection you would need, so ttc are not supported by design. Extract the individual font assets you need (if legally allowed!) and then be explicit about which single font you need for which single @font-face declaration.

And remember that this is possible:

@font-face {
  font-family: myfont;
  font-weight: normal;
  src: url('that-font-I-like-Regular.woff') format('WOFF');
}

@font-face {
  font-family: myfont;
  font-weight: bold;
  src: url('that-font-I-like-Regular.woff') format('WOFF');
}

...

:root {
  font-family: myfont;
}   

h1 {
  font-weight: normal; /* will use that-font-I-like-Regular.woff */
  ...
}

p {
  font-weight: bold; /* will _also_ use that-font-I-like-Regular.woff */
  ...
}