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

Font choice #28

Closed
hannsadrian opened this issue Nov 21, 2022 · 3 comments · May be fixed by #33
Closed

Font choice #28

hannsadrian opened this issue Nov 21, 2022 · 3 comments · May be fixed by #33

Comments

@hannsadrian
Copy link

hannsadrian commented Nov 21, 2022

Hello everyone,

I stumbled upon the CodeEdit project a while ago and now saw that you made a landing page for it. I really like how you're mimicking the apple website. However, what throws me off just very slightly is the fallback to the Helvetica font. This even applies to most apple devices as they somehow do not recognize SF Pro Display in Safari.

To complete the apple-appearance I suggest using the Inter font. It comes very close to SF Pro and is a longterm favorite of mine.

If you like, I'd be happily implementing it into the site 😃

Regards,
Adrian

@Dainternetdude
Copy link
Member

Inter is the wrong typeface to use here. Safari has a built-in typeface keyword which can be used to invoke the apple system typeface: -apple-system. On Safari & I believe firefox this will translate to whatever the apple system typeface is, even if they decide to change it away from San Francisco. On Chrome the same feature is called BlinkMacSystemFont. I suggest modifying the font-family list to instead include these two, ahead of San Francisco, then fallback to Helvetica if none of those three are available. See https://systemfontstack.com/ for more information, although this is not quite the same thing that we're going for.

@lukepistrol
Copy link
Member

The actual code already uses -apple-system.

From globals.css:

body {
  …
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

@Dainternetdude
Copy link
Member

I'm not familiar with the javascript at work here but the typeface being used is pretty clearly not the system typeface. I have no clue why though as reading the style sheet tells me exactly what you've posted. The safari inspector however, tells us the real typeface is in fact SF Pro followed by Helvetica Neue.

Screenshot 2023-03-09 at 5 45 35 PM

Screenshot 2023-03-09 at 5 44 05 PM

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

Successfully merging a pull request may close this issue.

3 participants