GitHub font in my Chrome was like this:
And now it is like this:
Is there any way to switch it back?
That might not be possible at the moment, as Steven Popovich explains in this discussion thread (by Gani Georgiev):
We made a decision to force some of the fonts in the app for layout purposes, but maybe we should revisit it.
That was for GitHub mobile, but it might also have a consequence on the GitHub website itself.
This discussion (about the website) speaks about the Noto Sans font, and suggests using a third-party Chrome plugin Stylebot to change locally said font.
Although the same thread includes:
I've just found that you can force a monospace font for the markdown editor that "fixes" the backtick overlap.
You can go to https://github.com/settings/appearance and enable the "Markdown editor font preference" at the bottom of the page:
Related
Except using CSS and git diff is there a way to change the font color of the text in Github Readme or Comments.
GitHub does not allow you to control the font color of anything that's rendered on a page, whether that's a README, an issue comment, a pull request comment, or elsewhere. There are a couple reasons for this.
First of all, spammers and other people trying to engage in abuse will try to hide text by using a font color that's identical or very similar to the page background. GitHub does not want to encourage spam and abuse.
Second, allowing users to set the font color creates accessibility problems, since users can set fonts that are difficult for some people to see due to low contrast. GitHub is legally and ethically required to consider accessibility in its interface.
Third, it prevents GitHub from creating new styles or features like a potential dark mode. Colors that might look fine on a light background would be impossible to see clearly on a dark background.
Even CSS doesn't work here; GitHub filters all content rendered on the interface to strip out anything that might be harmful or problematic.
I use PowerShell as my shell on Windows 7. I find that ConEmu is a really good terminal. Since I am not on Windows 10, I cannot use Windows Terminal but ConEmu is not bad at all. I found out about posh-git and oh-my-posh and how they can customize your PowerShell experience. I installed oh-my-posh and the Paradox theme looked nice. But I saw some empty boxes in random places in my Prompt.
And this is an issue that I face on all the themes. The colors and the design are beautiful and I want to use it but those weird boxes are keeping me from doing that. I would also like to tell that I am using Cascadia Code as my font and also this is the Powerline version of Cascadia Code. So, I think it should work as excepted. Next, trying to fix this, I went to nerdfont.com and I installed Cascadia Code from there as opposed to Microsoft's official GitHub repository. Then I set ConEmu's font to Cascadia which I installed from nerdfonts and this happened:
It's better in a way that I can see the Python symbol and some more symbols but still there is one box that cannot be rendered. But it does get worse if I change repository:
There is a weird question mark after "master". I think I have met all the prerequisites to use oh-my-posh like install posh-git and PSReadLine and having powerline Cascadia Code font and also using ConEmu as they officially suggest. I would absolutely appreciate it a lot if anyone can help me out of this mess and suggest what to do to fix my prompt.
P.S I am using PowerShell 7 Core.
When you see boxes, that means that the font doesn't have that specified character. e.g. there are a lot of specialized fonts that don't have every character location defined.
Right on the oh-my-posh GitHub page, Quote:
In case you notice weird glyphs after installing a font of choice,
make sure the glyphs are available (maybe they have a different
location in the font, if so, adjust the correct $ThemeSettings icon).
If it turns out the character you want is not supported, select a
different font.
Also on the oh-my-posh GitHub page, the font used is:
The fonts I use are Powerline fonts, there is a great repository
containing them. I use Meslo LG M Regular for Powerline Nerd Font
If using Meslo LG M Regular doesn't solve your problem, then you have to manually remap the icons to the correct unicode locations in your chosen font.
For Version 2 of Oh My Posh, you have to edit the $ThemeSettings variable. Follow the instructions on the GitHub on configuring Theme Settings. e.g.:
$ThemeSettings.GitSymbols.BranchSymbol = [char]::ConvertFromUtf32(0xE0A0)
For Version 3+ of Oh My Posh, you have to edit the JSON configuration file to make the changes, e.g.:
...
{
"type": "git",
"style": "powerline",
"powerline_symbol": "\uE0B0",
....
Posting this response because I followed #HAL9256 's response and it was extremely helpful but I had to take it one step further. If you are using windows terminal, you actually have to set the terminal to use the nerd font. This took me far too long to figure out so hopefully it helps the next person.
In windows terminal, open the settings, then the Defaults on the left blad, then the appearance tab, finally change the fontface to something nerd font
https://www.jondjones.com/media/rhzobluq/customise-your-powershell-prompt-like-a-boss-c.gif
source: https://www.jondjones.com/tactics/productivity/customise-your-powershell-prompt-like-a-boss/
I faced the same issue and solved it by editing the following file: C:\Path\To\Your\WindowsPowerShell\Modules\oh-my-posh\2.0.496\defaults.ps1
Within PromptSymbols, there should be something called VirtualEnvSymbol. Just change the value from the current one to something from the above listed ones. For example,
VirtualEnvSymbol = [char]::ConvertFromUtf32(0x26A1)
I've encounter the same problem and was solved installing the fonts.
Download the fonts at https://github.com/microsoft/cascadia-code/releases
Unzip
Right click on the font and select "Install the font for all users"
Enjoy !
From : https://github.com/microsoft/cascadia-code
Just install this whole Cascadia Code font and it will work no need to modify the theme settings.
https://github.com/ryanoasis/nerd-fonts/tree/master/patched-fonts/CascadiaCode/Regular/complete
I like the fact that the github issue tracker supports Markdown. However, I find it relatively unpleasant to actually write Markdown in the github editor. It lacks many of the features of the Markdown editor on StackOverflow.
E.g., it lacks:
a button to indent multiple lines of code by four spaces
a button to add quote to the start of each line
real time markdown preview
fixed width font
ability to insert image using imgur
a confirmation dialog box when you close a browser window when you might otherwise lose your work
In particular, the inability to insert code blocks is probably the feature I miss the most.
Sure, I could write my markdown in a separate editor and then paste it into the github issue tracker, but this is not especially appealing. I could even use the StackOverflow editor if I was careful not to click "Ask Question", but that seems a bit silly.
Question
Is there anyway of altering the text box in github to incorporate the editing features in StackOverflow?
Or if it is better to type in another text editor, what's a particularly elegant way of doing that? (e.g., minimum steps, simple to move back and forward, good editor) Perhaps theres a way of clicking a text box and bringing up a Rich Markdown editor which when closed returns the contents to the original text box?
You should appeal to GitHub to add one. Your argument is sound. Stack Overflow demonstrates editors can be functional, non-intrusive and tasteful.
Meanwhile, there might be a browser extension that does some of this. https://chrome.google.com/webstore/detail/cpojebknccclkjabfngjlcknonpmhhol
If you are on Windows, you might want to check MarkPad: http://code52.org/DownmarkerWPF/
Disclaimer: I have never used it myself (being on Ubuntu), only read about it watching the code52 project. I know it can edit posts of several blog systems, but I'm not sure if Github is in the list of supported web sources. Its syntax however is supported, for sure.
The challenge:
Provide dynamic web fonts that render acceptably across all major browsers, devices and Operating Systems
The story:
So I had used cufon or sifr in the past and had since abandoned both in favor of #font-face. After using #font-face in production for some time, I made a horrifying discovery. Many fonts (most?) look like crap in Windows XP, regardless of browser. Even in google chrome, XP renders the fonts unacceptably jagged and ugly.
I am aware of why this is happening. After reading many excellent posts on ye olde stack overflow, I understand the issue is NOT of font hinting, but of XP having clear-type set to off be default. So ALL fonts are jagged in XP by default regardless of application.
So... if #font-face works great everywhere BUT XP with clear-type off, and is still superior to cufon what should we be doing?
Possible solutions:
#font-face as default, Cufon with user agent sniffing for windows XP.
(currently using, and very much not loving it)
#font-face alone with yet unknown method of forcing clear-type
Cufon alone :(
Another paradigm all together
Failed solutions:
Adobe Typekit (jagged in XP on their own website!, even though they show a smooth specimen jpeg)
Google Webfonts (same problem with XP)
#font-face alone (same problem with XP)
Cufon so far works everywhere, but just sucks, and offers additional challenges if you are animating anything, or wish to update the text after the fact.
Do you have a solution that works completely cross browser and cross OS? What is the best way to handle this?
I'm pretty sure the web-fonts, which look ugly, are missing some hinting (edit: Nope, even though hinting is still required to make a font look good on windows, the real problem here was the disabled ClearType in XP. However, this answer has a solution anyway).
Unlike font renderers on other operating systems the windows engine relies on hinting information shipped with the font. If the hinting is missing, bad or broken the font will look ugly - simple as that. Luckly there's a way to add some automatically generated hinting to a ttf-font using ttfautohint. After adding the hinting you can generate the different web-font-formats (eof, woff, etc) you need from the enhanced TTF. Additionally you should try to use SVG fonts if font-smoothing is disabled, since they are always rendered with antialiasing.
I've written an article on how to create web-fonts on Pixels|Bytes, which explains how to add hinting to a font and how to use my Font Smoothie script to enable SVG fonts when necessary. Hope this helps :)
PS: I'm aware that linking to my own blog won't be appreciated here, but I think my post describes a good solution to the problem, so I posted it anyway. Please leave a comment if you want me to remove the link and I'll do so.
http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/
This is what I have found works so far. This solution detects jagged fonts, so then we can do something like this: #font-face as standard, and Cufon as fallback.
In my case, I found that the answer does not in fact center on enabling Clear Type in WinXP. Whether Clear Type is enabled or disabled, I find that some of my #font-face English fonts (especially BLACK, SANS-SERIF) look bad in IE7 and IE8. It's sometimes more than just being jagged or having bad anti-aliasing. The big problem I see is that the shape of the font itself (some fonts, not all) seems to squish into something quite unattractive. I found an acceptable solution by following the advice of Torben. Font Hinting was all I needed, and again, that solution has nothing to do with Clear Type being enabled. To get the font hinting app up and running, read the instructions here:
https://gist.github.com/davelab6/3783491
(I used the "ttfautohint-0.95.tar.gz" file here): http://sourceforge.net/projects/freetype/files/ttfautohint/0.95/
You should also review the documentation, and you need to also install MacPorts (or you will get an error in the Terminal during your build), but since my rep score prevents me from posting more than two URLs, you'll have to Google for that.
Better hinting doesn't mean your #font-face fonts will now look as perfectly smooth and great on IE in WinXP as they do on Macintosh browsers. But I found that the font hinting prevents nasty distortions in the shape of some fonts within IE7 and IE8. To me, that is an acceptable solution.
I can only add that it's rather troublesome to build the ttfautohintGUI on OSX. You have to installed hundreds of MB of software, downloading from multiple locations too, just to build the GUI app. But once done, the app allows you easily to hint your #Font-Face fonts and resolve many WinXP display issues. Just be sure to tick "Windows Compatibility" in the GUI (it's unticked by default). I also unticked the "Add ttfautohintinfo" and "Pre-hinting" options, leaving everything else as their defaults. Click "Browse..." to add your Input File (the font you want to hint), and then copy and paste that path in the Output File, changing the filename to whatever you want it to be. You won't enable the "Run" button unless there is something in both the Input File and Output File fields.
Best wishes.
We're using typekit fonts for some of our styles. We've noticed that on some machines, the fonts don't load on our live site, although they do on our dev site. This is only on certain machines, and only when viewing our live site (which is identical code-wise to dev at this point.)
For example, my boss looks at the dev site and the live site in two separate tabs in Chrome on the Mac. The elements using typekit fonts look different on the live site (they're failing over to the default serif font.) On my Mac in Chrome, everything is correct on both versions of the site.
Is there some kind of browser setting somewhere that would cause this? (Given that the fonts being used are barely distinguishable from a default serif font, my solution would be to just eliminate the typekit fonts altogether, but it's not my call to make.)
I'm not sure if this solves your issue, but my issue was that I was loading "Museo Sans", and I needed to load "museo-sans" for the css font-family. The first font-family was loading the font directly from my machine, so it worked on another designers machine who also had the font loaded, but not on most other devices/machines via typekit file.
Hope this clears up one potential scenario.