<h1 class="otf">Roslindale Font, FTW!</h1>

<p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>

<p class="otf">Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>

<p class='smcp'>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass.</p>
@font-face {
  font-family: "Roslindale Text";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/32795/RoslindaleText-Regular.woff2")
      format("woff2 supports variations"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/32795/RoslindaleText-Regular.woff2")
      format("woff2-variations");
  font-display: swap;
}

body {
  font-family: "Roslindale Text", sans-serif;
}

h1 {
  font-size: 5vw;
}

p {
  font-size: 2vw;
}

.smcp {
  font-variant-caps: small-caps;
  -moz-font-feature-settings: "smcp";
  -webkit-font-feature-settings: "smcp";
  font-feature-settings: "smcp";
}

.c2sc {
  font-variant-caps: all-small-caps;
  -moz-font-feature-settings: "c2sc";
  -webkit-font-feature-settings: "c2sc";
  font-feature-settings: "c2sc";
}

.otf {
  font-variant-caps: all-small-caps;
  -moz-font-feature-settings: "c2sc", "smcp";
  -webkit-font-feature-settings: "c2sc", "smcp";
  font-feature-settings: "c2sc", "smcp";
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.