Alternative glyphs Factor A font CSS - Stack Overflow

admin管理员组

文章数量:1312774

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

Share Improve this question Follow edited Feb 3 at 10:45 Damilola Adegbemile asked Feb 3 at 9:53 Damilola AdegbemileDamilola Adegbemile 10355 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

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";

本文标签： Alternative glyphs Factor A font CSSStack Overflow