recursive icon indicating copy to clipboard operation
recursive copied to clipboard

Arrows not working on the web with Google Fonts

Open MattMcAdams opened this issue 1 year ago • 1 comments

Problem description

When using the font through google fonts on the web, the arrows will not display as this font's characters.

Expected behavior

The arrows should use the characters from this font

Screenshots

Screenshot 2024-02-29 at 4 12 03 PM

To Reproduce

I've made a codepen that shows this issue: https://codepen.io/mattmcadams/pen/mdgdKZL

Environment (please complete the following information):

  • OS: MacOS 13.5.1
  • Browser: Firefox Dev Edition 124.0b3
  • Fonts: Google fonts? I'm not sure

Additional context

I've tried passing the actual arrow characters into my code and and using the ← and → sequences.

My CSS looks like this:

@import url('https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CRSV,[email protected],300..800,0..1,0..1&display=swap');

body {
  font-family: 'Recursive', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

I've tried to search around for an answer but I've come up empty, but I haven't tried self-hosting the font yet, so I'll try that next.

I don't know if this is a legitimate bug or if there are extra steps I need to do to get these characters. Thanks for any assistance, and thanks for the incredible typeface!

MattMcAdams avatar Feb 29 '24 22:02 MattMcAdams

I changed the title because self hosting the font has the correct arrows. Seems to just be a problem with the version on google fonts?

MattMcAdams avatar Feb 29 '24 22:02 MattMcAdams

Google Fonts subsets fonts to limit their size by excluding less common characters. The arrows were probably cut out in that process. I don’t think it’s a problem in Recursive, so I’ll close this.

This issue seems relevant: https://github.com/google/fonts/issues/4820

arrowtype avatar Mar 19 '24 20:03 arrowtype