GitHub.com font changed | Hacker News Reader

GitHub.com font changed

github.com

57 pointsdariubs36 comments

One of the most useful options in Firefox is the checkbox "Allow pages to choose their own fonts, instead of my selections above"[1], also available as browser.display.use_document_fonts in about:config. When this is unchecked, Firefox will ignore all fonts specified by web pages and just use the much-more-likely-to-be-reasonable choice of default font you have made; and you can then disable web fonts, which will make pages load faster.

I don't think allowing websites to use specific font names in CSS was ever a good idea. It would have been better to limit them to predefined family names, which would map to fonts the user could customize. In any case, this allows me not to care about the whims of website designers and to always have text in a readable font. Only one issue: one of the unfortunate trends in web design is to use web fonts for icons. Not allowing websites to specify different fonts from the default also happens to break the icons. This isn't enough of a big deal for me to disable the option, but it's an annoyance worth knowing about.

[1]: https://clbin.com/bFSlHF.png

I have an extension that (tries to) do the same thing for Chrome [0]. I mostly wrote it when I had a metered connection and wanted faster access.

[0]: https://github.com/captn3m0/disable-web-fonts

> I don't think allowing websites to use specific font names in CSS was ever a good idea.

I'm with you there. I can't help feeling babied when I visit most websites these days, for more reasons than simply the commonplace (over)use of web fonts.

What happens when sites are using font's for images?

Then it breaks. I can deal with that -- there aren't very many sites that decide to abuse fonts that way, in any case.

And who knows, maybe one day SVG will actually reliably render correctly in browsers, and people will use images when they want to display images

The problem isnt so much SVG rendering, its that you can grab an icon font with 400 icons that look great, its easy to add them to places beside text, like in menus or on buttons.

You can use SVG, but there is no CDN-hosted SVG sprite with 400 icons to replace things like FontAwesome or Ionicons, so you would have to find all the SVGs you wanted. Then you have the challenge of getting them the right size and position beside text in very tight spaces.

You mean like this: https://css-tricks.com/svg-sprites-use-better-icon-fonts/?

Are there any frameworks like bootstrap that include SVGs?

I think the reverse would be a bigger problem: with a limited selection of user-controlled fonts, web designers would use images for fonts, which would be terrible for accessibility and usability.

But that's my favorite part of mobile browsing!

Load the page, start reading an article, scrolling as you read. Then the CSS styling kicks in, knocking you back to the top of the page, or worse -- somewhere else entirely, who knows where. So you take some time to figure out where you left off and continue reading again.

But then the font loads. And that shifts everything again. And now you're in the middle of the fourth paragraph when before you were reading the third.

    apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
    Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
    sans-serif

Seems like they're just trying to use whatever decent sans-serif font is available.

Viewing it on OS X, it looks like they're using the San Francisco font. A little jarring if you're used to seeing the old typeface 20+ times/day, but it looks good.

Fortunately, the transition seems to have gone a bit better than Medium's: https://medium.com/design/system-shock-6b1dc6d6596f#.j5z5g5g...

You would think that a site as large as Medium would think of actually testing their site on Windows before deploying.

HORRAY! You can use a Chrome extension to put the font back :)

https://chrome.google.com/webstore/detail/the-old-github-fon...

https://github.com/rreusser/the-old-github-font

Goddamn, I hate Roboto, it is way too fat by default.

The Bold Roboto [1] just looks awful on my machine. Arial [2] looked much better, and if they want to use the system font, Ubuntu [3] also looks much better.

[1] http://i.imgur.com/zfThWXP.png

[2] http://i.imgur.com/qngKbGq.png

[3] http://i.imgur.com/77vDhCd.png

Yeah, the new font is HORRIBLE!! I have to move back from the screen about 12 inches to read it without my eyes hurting.

Way too wide!

Roboto... that's what got me here. I guess Segoe isn't too bad on Windows, but Roboto is just tragic. Wow. Really bad.

Bold markdown is basically broken on OSX+Chrome, see before & after screenshots here, which I tweeted at Github: https://twitter.com/MrOlovsson/status/752843094765236224

You can alias fonts in Linux, i.e., replace one font with any other. Font Manager is a nice UI for this. I never found anything like it for Windows or OS X.

How do I get the old font back? Chrome/Windows font is terrible!

Nvm, found a Chrome extension to change it back to Arial.

https://github.com/rreusser/the-old-github-font

Segoe UI on Windows. Roboto looks way better.

The idea behind this change seems to be centred around using a modern font no matter what device the user is on while not sacrificing performance. The trade-off here is brand consistency, but if the alternatives are to use an archaic font or a slow webfont, I think this approach wins.

Firefox hack:

There is an extension to override/inject CSS for specific domains: https://addons.mozilla.org/en-US/firefox/addon/stylish/

Old styles can be grabbed from the: https://github.com/rreusser/the-old-github-font/blob/master/...

After applying the following config: http://i.imgur.com/hGffN8I.png GitHub look is back to normal.

Anyone know what it was previously? I'm writing a user stylesheet to change it back.

Helvetica on OSX, Arial on Windows.

They also changed the size from 13px to 14px.

font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

font-size: 13px;

line-height: 1.4;

Thank you. I found this: https://github.com/rreusser/the-old-github-font

Yeah, I'm getting Cantarell rendering on Gnome, it's no San Francisco.

Looks terrible on chrome on windows arrrgg why did it have to change

It's using your system fonts. If they look terrible, it's not Github's fault…

previous was a lot better.

and there I was trying to fix my Firefox (clearing caches, cookiest, etc.) ... XD

Reply on news.ycombinator.com