I'm trying to use this font variant from intervalType website in my Tailwind project. It's the Factor A font. I want it to look exactly like this:

This is what shows in my project:

How can I switch it to the top variant please?

globals.css

@font-face {
  font-family: "clooza";
  src: url("../fonts/FactorABold.otf") format("opentype");
  font-feature-settings: "ss01", "ss03";
}

I'm trying to use this font variant from intervalType website in my Tailwind project. It's the Factor A font. I want it to look exactly like this:

This is what shows in my project:

How can I switch it to the top variant please?

globals.css

@font-face {
  font-family: "clooza";
  src: url("../fonts/FactorABold.otf") format("opentype");
  font-feature-settings: "ss01", "ss03";
}

Codesandbox minimal reproduction: https://codesandbox.io/p/devbox/heuristic-paper-n8kzph?workspaceId=ws_XqiLj2mo8jfZghjhYtQTgb

• css
• fonts
• tailwind-css

1 Answer 1

https://intervaltype/product/factor-a-variable/ has select boxes to switch from "Default Set" to several different ones.

"Funk It Up" appears to be the setting for the capital letters as you want them, and "Rounded Lowercase" is what you'll need for the lowercase letters.

Now when you inspect the textarea containing the sample text below this selection, you'll see that the first one applies font-feature-settings: "ss01";, and the second one font-feature-settings: "ss03";

You want both those features, so you need to list them both:

font-feature-settings: "ss01", "ss03";