Last font-face weight wrongly being used by default - css

Question

I'm adding multiple weights and styles of a single font to a font-face in a Rails project. I know that order matters here, ie. first define normal, then bold, then italic, then italic bold.
However, when I try to define normal first and then italic second, what shows up on my site by default is the italic version.
fonts.scss contains:
#font-face {
font-family: 'Sentinel Book';
src: font-url('sentinel-book-webfont.eot');
src: font-url('sentinel-book-webfont.eot?#iefix') format('embedded-opentype'),
font-url('sentinel-book-webfont.woff2') format('woff2'),
font-url('sentinel-book-webfont.woff') format('woff'),
font-url('sentinel-book-webfont.ttf') format('truetype'),
font-url('sentinel-book-webfont.svg#sentinelbook') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'Sentinel Book';
src: font-url('sentinel-bookital-webfont.eot');
src: font-url('sentinel-bookital-webfont.eot?#iefix') format('embedded-opentype'),
font-url('sentinel-bookital-webfont.woff2') format('woff2'),
font-url('sentinel-bookital-webfont.woff') format('woff'),
font-url('sentinel-bookital-webfont.ttf') format('truetype'),
font-url('sentinel-bookital-webfont.svg#sentinelbook_italic') format('svg');
font-style: italic, oblique;
}
$font-family-serif: 'Sentinel Book', sans-serif;
$font-family-base: $font-family-serif;
Note that I'm using Bootstrap + SASS and overriding their variables, but still the default I'm seeing is italic:
If I rearrange the order in which the styles are defined (italic first, then norma), my text appears normal. But if I italicize anything (using <em> tags for example), the browser does its own italicization instead of using the italic version of the webfont loaded.
Any tips here would be appreciated!

Answer 1

The reason is that the declaration font-style: italic, oblique is syntactically malformed (see CSS 3 Fonts on font-style; only one keyword is allowed as the value). Change it to
font-style: italic;
It may sound surprising that the error in declaring the italic typeface causes all text to be rendered in italic. But the reason is that by CSS error handling rules, the incorrect declaration is ignored, so in this #font-face rule, font-style is defaulted to normal. This means that it will be applied to normal text; but the font file contains the italic typeface.
When you changed the order of the font-face rules, the latter rule that refers to the regular typeface will be used for normal text. Since there is no rule italic text, browsers will render italic text using regular typeface, applying algorithmic slantic (“faux italic”, “synthetic italic”) to it (usually; this in principle depends on browser).
The keywords italic and oblique mean the same thing in practice, though in theory they could have different meanings. But using them both in a font-style value makes the declaration syntactically invalid.