Css font-face using ttc file

Question

This is my first time using font-face, and it's really hard for me to actually render the exact font, especially when it comes to *.ttc files.

Here is what I've done so far:

@font-face {
    font-family: 'FontName';
    src: url('../fonts/font.ttc') format('truetype');
    font-weight: normal;
}


.header {
    font-family: 'FontName;
}

When I check the network tab in Chrome's inpector, I can see that the font is loaded successfully, but the result text still uses another font.

What did I do wrong? Please help me to fix this problem. Thanks a lot in advance.

Update

One more thing that I figured out. When I style inline, the font is rendered correctly.

    <p style="font-family:'FontName'">test 2</p>

Is there any delay in loading or something like that?

Answer 1

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 */
  ...
}