[Google Fonts] How to use non-monospace version of recursive?

subnut commented 3 years ago

I went to recursive.design, → Get Recursive (top right) → Set Monospace to Range
and I got the following link -

https://fonts.googleapis.com/css2?family=Recursive:MONO@0..1&display=swap

Now, the problem is that, if I specify the following CSS for my webpage -

body {
    font-family: 'Recursive', sans-serif;
}

It renders everything in MONOSPACE

The problem can be solved by using Value instead of Range, but that is not an option because I need both non-monospace for normal text and monospace for code.

Please help!

arrowtype commented 3 years ago

Hey @subnut, sorry to hear that! A few questions for you:

What OS & browser are you on?
Do you have Recursive installed locally? If so, do you have a recent release?
Do you happen to have a test site you could share with me? Even if it’s a codepen, that would be helpful.
Can you please share a screenshot, just so I see what you’re seeing?

For me, things are still working as I expect in a quick test on CodePen, but I believe Google Fonts is in the process of updating their hosted version of Recursive, and either that or your local version of the typeface might be causing this issue.

arrowtype commented 3 years ago

By the way, a way to "force" the Sans (non-monospace) style would be to add the following CSS to your html/body tag:

body {
    font-variation-settings: "MONO" 0;
}

And then you could apply Mono when needed like this:

code, pre {
    font-variation-settings: "MONO" 1;
}

But, the default should be "MONO" 0, so it’s a surprise that it’s not for you. My best guess is that it might be an OS or browser bug.

subnut commented 3 years ago

What OS/Browser are you on?

Do you have recursive installed locally?

No

Do you happen to have a test site you could share with me? Even if it’s a codepen, that would be helpful.

Umm... no... not right now...
I don't have a codepen account either.....
(Please see the attached screenshots below. If they don't help, I shall spin up a test site on github pages)

Can you please share a screenshot, just so I see what you’re seeing?

Here are the screenshots -

Your codepen
Your codepen with "MONO" 0 (Note that it's still monospaced)
Your codepen with CSS URL modified from MONO@0..1 to MONO@0

Also, a gif -

test

subnut commented 3 years ago

Also, a side note -

If I use the .woff file directly, there is no problem
Like I am doing right now in subnut.github.io

@font-face {
  font-family: 'RecVar';
  src: url('https://raw.githubusercontent.com/arrowtype/recursive/main/fonts/ArrowType-Recursive-1.078/Recursive_Web/woff2_variable_subsets/fonts/Recursive_VF_1.078--subset_range_english_basic.woff2') format('woff2');
  unicode-range: U+0020-007F,U+00A9,U+2190-2193,U+2018,U+2019,U+201C,U+201D,U+2022;
}
body {
  font-family: RecVar, sans-serif;
  font-variation-settings: 'CASL' 0.7;
}
pre, code {
  font-family: RecVar, monospace;
  font-variation-settings: 'MONO' 1, 'CASL' 1;
}

Notice that, in this case, I didn't specify "MONO" 0 for body, it takes it as default. (Just like you mentioned)

subnut commented 3 years ago

Ping @arrowtype
Can you re-create this issue from the above-provided screenshots?

arrowtype commented 3 years ago

Thanks so much for the detailed info! That is helpful.

Quick extra question: what version of Windows are you on?

To be honest, my best guess is that the Google Fonts API is somehow incorrectly detecting your browser/OS or otherwise getting tripped up by it. I can't really think of another reason why the woff2 from GitHub would work when the GF one doesn't.

Two things that would be helpful for you to test, if you're open to it:

Go to the actual CSS URL of the Google Fonts import, and please paste the contents here
In that css, go to the font URLs listed. That should download those fonts. Then, you can check whether those are variable, e.g. by going to wakamaifondue.com/beta

arrowtype commented 3 years ago

...hopefully that makes sense, but please let me know if not.

If it does work, please let me know whether you get variable sliders in WakamaiFondue.

subnut commented 3 years ago

Which version of windows?

20H2, which I guess is the latest release?

The outputs -

URL

https://fonts.googleapis.com/css2?family=Recursive:MONO@0..1&display=swap

Output

/* vietnamese */
@font-face {
font-family: 'Recursive';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/recursive/v23/8vJN7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUvz2xbXfn1uEQadCCk310tQ1TDA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
font-family: 'Recursive';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/recursive/v23/8vJN7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImKsvxvU-MXGX2fSqasNfUvz2xbXfn1uEQadCCk317tQ0.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Recursive';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/recursive/v23/8vJN7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImqvTxvU-MXGX2fSqasNfUvz2xbXfn1uEQadCCk310tQ1TDA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
font-family: 'Recursive';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/recursive/v23/8vJN7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE5YaERmK-CImqvTxvU-MXGX2fSqasNfUvz2xbXfn1uEQadCCk317tQ0.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

subnut commented 3 years ago

@arrowtype I tried to check the fonts on wakamaifondue.com, but that website seems very unintuitive to me 😅
Please don't mind 😅

I wasn't able to understand what to look for..

arrowtype commented 3 years ago

No worries! That site does a lot. The CSS you pasted is helpful.

When I go to that same URL (on Chrome browser, Mac Catalina), I get the following CSS:

/* vietnamese */
@font-face {
  font-family: 'Recursive';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE61aHWiJ-CImKsvxvU-MUEnWfSqasB-XlT6ZnI14ZeY9aA.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}
/* latin */
@font-face {
  font-family: 'Recursive';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/recursive/v23/8vI-7wMr0mhh-RQChyHEH06TlXhq_gukbYrFMk1QuAIcyEwG_X-dpEfaE61aHWiJ-CImKsvxvU-MUEnWfSqasB-XlTGZnI14ZeY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

And if I download fonts from the URLs in your CSS vs the CSS I get, I do see that you are getting Monospace, non-variable fonts, while I am getting fonts with a variable MONO axis. I tested this with a mac app, Font Goggles.

You can see a similar thing in Wakamai Fondue. If you drop a font into the site, the "Tester" section will show a variable axis slider if the font is variable. If it’s static, you don’t get a slider. Here’s what I get with the font Google Fonts returns to me:

arrowtype commented 3 years ago

Okay, I think this is an issue coming from Google Fonts, so I’ve filed a new issue over there: https://github.com/google/fonts/issues/3321

If you want an immediate workaround, I would suggest self-hosting Recursive, which you can find web versions of in the latest release.

Thanks for taking the time to document this issue! Best of luck with whatever you’re building!

subnut commented 3 years ago

Thank you! And thanks again for making such a beautiful and versatile font. It's really awesome!

arrowtype commented 3 years ago

:) Thank you, @subnut! I am very grateful I’ve been able to put so much time into making this weird idea a reality.

arrowtype / recursive