[JSWolf]

Originally Posted by jjalocha

Hello DNSB and JSWolf,
Thanks for chiming in about the small caps issue!
Sadly, the extra instructions (on top of font-variant:small-caps;) don’t work for me, it still renders fake small caps, not the true glyphs provided by the font. (Also, still no old style figures.)
Here’s the relevant CSS:

@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Source Serif 4";
    src: url("../fonts/SourceSerif4-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
}

body {
    font-family: "Source Serif 4";
    font-weight: 400;
    text-rendering: geometricPrecision;
}

.sc {
    font-variant: small-caps;               /* high-level property          */
    font-variant-caps: small-caps;          /* high-level property          */
    -moz-font-feature-settings: "smcp";     /* low-level (old Firefox)      */
    -webkit-font-feature-settings: "smcp";  /* low-level (old Webkit)       */
    font-feature-settings: "smcp" on;       /* low-level (all new browsers) */
}
.osf { font-variant-numeric: oldstyle-nums; }

I've cleaned up your CSS and it does work. I wasn't able to test with your font. But if your font is correctly defined and it supports smallcaps, then you will be OK. One thing though to get smallcaps, the text has to be lower case. Uppercase stays as uppercase. So if you are converting from a book using a font size for small caps, you'll also have to use text-transform: lowercase;.

@font-face {
  font-family: "Source Serif 4";
  src: url(../fonts/SourceSerif4-Regular.ttf);
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Source Serif 4";
  src: url(../fonts/SourceSerif4-Italic.ttf);
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Source Serif 4";
  src: url(../fonts/SourceSerif4-Bold.ttf);
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Source Serif 4";
  src: url(../fonts/SourceSerif4-BoldItalic.ttf);
  font-weight: bold;
  font-style: italic;
}
body {
  font-family: "Source Serif 4";
}
.osf {
  font-variant-numeric: oldstyle-nums;
}
.sc {
  font-variant: small-caps;
}