Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Variable TTF without named instances #537

Open
SnowSquire opened this issue Oct 12, 2024 · 1 comment
Open

Variable TTF without named instances #537

SnowSquire opened this issue Oct 12, 2024 · 1 comment

Comments

@SnowSquire
Copy link

SnowSquire commented Oct 12, 2024

Is your feature request related to a problem? Please describe.
The Recursive variable font (Recursive_VF_1.085.ttf) on Windows doesn't allow simultaneous use of both font-variation-settings and font-feature-settings. While font-feature-settings works fine in Chromium-based applications (Chrome, VSCode), accessing variations requires selecting a specific named instance (e.g., "Recursive Mono Casual") instead of just "Recursive". This selection locks out the ability to change variation properties.

Describe the solution you'd like
I'd like a variant of Recursive_VF_1.085.ttf without the named instances, allowing users to edit both font variation and font feature settings simultaneously. This would provide more flexibility in customizing the font's appearance while retaining access to OpenType features.

Describe what you've tried so far
I attempted to create a modified version of the font using FontTools to remove the named instances. However, this naive approach resulted in a broken font:

from fontTools.ttLib import TTFont

font = TTFont("Recursive_VF_1.085.ttf")

fvar = font["fvar"]

fvar.instances = []

font.save("Recursive_VF_1.085_modified.ttf")

Additional context
I'm not sure if my proposed fix actually will allow me access the axes via css but I believe it will. The CSS I'm trying to get working is this.

      p {
        font-family: "Recursive", monospace;
        font-size: 1.5rem;
        --mono: "MONO" 1;
        --casl: "CASL" 1;
        --wght: "wght" 300;
        --slnt: "slnt" 0;
        --CRSV: "CRSV" 1;
        font-variation-settings: var(--mono), var(--casl), var(--wght),
          var(--slnt), var(--CRSV);
        font-feature-settings: "ss01", "ss03", "ss04", "ss05", "ss06", "ss12",
          "dlig";
      }

either I have to set the font-family to "Recursive Mono Casual" and the font-features work, or I set it to "Recursive" and import from google fonts and the variations work.

@SnowSquire
Copy link
Author

Using a named instance (Ligatures show but font weight doesn't apply)
      p {
        font-family: Recursive Mono Casual, monospace;
        font-size: 1.5rem;
        --mono: "MONO" 1;
        --casl: "CASL" 1;
        --wght: "wght" 1000;
        --slnt: "slnt" 0;
        --CRSV: "CRSV" 1;
        font-variation-settings: var(--mono), var(--casl), var(--wght),
          var(--slnt), var(--CRSV);
        font-feature-settings: "ss01", "ss03", "ss04", "ss05", "ss06", "ss12",
          "dlig";
      }

image

Using the font name (Simply uses the fallback font)
      p {
        font-family: Recursive, monospace;
        font-size: 1.5rem;
        --mono: "MONO" 1;
        --casl: "CASL" 1;
        --wght: "wght" 1000;
        --slnt: "slnt" 0;
        --CRSV: "CRSV" 1;
        font-variation-settings: var(--mono), var(--casl), var(--wght),
          var(--slnt), var(--CRSV);
        font-feature-settings: "ss01", "ss03", "ss04", "ss05", "ss06", "ss12",
          "dlig";
      }

image

Using google fonts (font weight applies but doesn't show ligatures)
      @import url("https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1&display=swap");
      p {
        font-family: Recursive, monospace;
        font-size: 1.5rem;
        --mono: "MONO" 1;
        --casl: "CASL" 1;
        --wght: "wght" 1000;
        --slnt: "slnt" 0;
        --CRSV: "CRSV" 1;
        font-variation-settings: var(--mono), var(--casl), var(--wght),
          var(--slnt), var(--CRSV);
        font-feature-settings: "ss01", "ss03", "ss04", "ss05", "ss06", "ss12",
          "dlig";
      }
    </style>

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant