arrowtype / recursive

Recursive Mono & Sans is a variable font family for code & UI
https://recursive.design
SIL Open Font License 1.1
3.26k stars 51 forks source link

Variable TTF without named instances #537

Open SnowSquire opened 5 hours ago

SnowSquire commented 5 hours ago

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 commented 4 hours ago
Using a named instance (Ligatures show but font weight doesn't apply) ```css 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](https://github.com/user-attachments/assets/4425d4aa-312a-473f-a3a1-dac75c296159)
Using the font name (Simply uses the fallback font) ```css 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](https://github.com/user-attachments/assets/d6135e18-3865-4bb9-8f0a-5e6105b74f29)
Using google fonts (font weight applies but doesn't show ligatures) ```css @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"; } ``` ![image](https://github.com/user-attachments/assets/77b19207-8f7a-4932-a2f3-fb3ae3aba255)