@font-face: Same name with different styles

[femesq]

Looking at the sources and the docs, I couldn't be sure if using @font-face with different files for each font-style's on the same font-family would work:

@font-face {
  font-family: 'Montserrat';
  src: url('#{$media-path-fonts}/Montserrat-Bold.eot');
  src: url('#{$media-path-fonts}/Montserrat-Bold.woff2') format('woff2'),
  url('#{$media-path-fonts}/Montserrat-Bold.woff') format('woff'),
  url('#{$media-path-fonts}/Montserrat-Bold.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('#{$media-path-fonts}/Montserrat-BoldItalic.eot');
  src: url('#{$media-path-fonts}/Montserrat-BoldItalic.woff2') format('woff2'),
  url('#{$media-path-fonts}/Montserrat-BoldItalic.woff') format('woff'),
  url('#{$media-path-fonts}/Montserrat-BoldItalic.ttf') format('truetype');
  font-weight: 900;
  font-style: italic;
}

... Neither if it would support deep Browser support which needs two src keys.

Anyone tried this?

Somewhat related: #236

[rtsao]

I think a comma separated string for the src style object property should suffice. This mirrors how this works in CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

[femesq]

Yes, the two src keys aims to support IE6-8 (which actually may not make sense for React, that support IE9+...).

My question in regard of font-face's and both its font-style and font-weight was in regard of how this is cached internally.
I mean: if it is cached based on font-family name only, using the same name for multiple styles and weights wouldn't work.

Looking in the code, I found this which appears that all the block is used to create the rule, but as I'm new to the project, I'm not sure about it..
If its the case, then we are fine...