cssfontstailwind-css

Alternative glyphs Factor A font CSS

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:

Factor A font

This is what shows in my project:

enter image description here

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

Solution

  • https://intervaltype.com/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";