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.

Sign up for GitHub

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

Jump to bottom

Allow to change the font size and font of the workbench #519

Open
hsdk123 opened this issue Nov 24, 2015 · 500 comments
Open

Allow to change the font size and font of the workbench #519

hsdk123 opened this issue Nov 24, 2015 · 500 comments
Labels
feature-request Request for new features or functionality workbench-fonts
Milestone
On Deck

Comments

@hsdk123
Copy link

hsdk123 commented Nov 24, 2015

At the moment, we can only change the font size / font of the editor. If we want to change the font size, we need to use a roundabout method of "zooming in / out". It would be nice if this could be adjusted through the preferences.
@jrieken jrieken added help wanted Issues identified as good community contribution opportunities feature-request Request for new features or functionality labels Nov 24, 2015
@skube
Copy link

skube commented Dec 3, 2015

Further to this, it seems weird that if I want larger fonts outside of the editor I have to zoom in each time I restart.

@egamma
Copy link
Member

egamma commented Dec 3, 2015

pls see #291 for the zooming issue (in general pls do not create combo issues 😄 )

@egamma egamma modified the milestone: Backlog Dec 10, 2015
@bpasero bpasero changed the title Change font size of outside editor Allow to change the font size of the workbench Apr 7, 2016
@bpasero bpasero self-assigned this Apr 7, 2016
@bpasero bpasero removed the help wanted Issues identified as good community contribution opportunities label Apr 7, 2016
@bpasero bpasero mentioned this issue May 30, 2016
Closed
@conceptualspace
Copy link

+1

v1.4.0 seemed to make the file explorer fonts larger/bolder, making it harder to traverse a large directory

@bpasero bpasero removed their assignment Aug 17, 2016
@bpasero bpasero changed the title Allow to change the font size of the workbench Allow to change the font size and font of the workbench Feb 10, 2017
This was referenced Feb 10, 2017
Closed
Closed
@bobrocke
Copy link

bobrocke commented Mar 6, 2017

+1

@bpasero bpasero mentioned this issue Mar 12, 2017
Closed
@nishantgeorge
Copy link

+1

2 similar comments
@dodalovic
Copy link

👍

@cgiacomi
Copy link

cgiacomi commented May 5, 2017

👍

@bobrocke
Copy link

bobrocke commented May 5, 2017

Does the new UI theming interface give access to the font size?

@bpasero bpasero mentioned this issue May 5, 2017
Closed
@kentor
Copy link

kentor commented May 17, 2017 •
edited
Loading

In addition, I would like to increase the line spacing in the explorer. File names are way too close to each other and is fatiguing to look at.

@xster
Copy link

xster commented May 18, 2017

Ha, I was gonna suggest exposing line height so I could decrease it and pack more files into each screen.

@alexdima alexdima mentioned this issue May 21, 2017
Closed
@timc13
Copy link

timc13 commented Jun 12, 2017

just to add another reason:

  • changing the Explorer to a monospaced font is easier to read when scanning for files

@marcoms marcoms mentioned this issue Jun 21, 2017
Open
@mzabuawala
Copy link

+1

Please add support for changing font size of EXPLORER window.

@Xanewok Xanewok mentioned this issue Jul 17, 2017
Closed
@codenoid
Copy link

codenoid commented Jan 1, 2025

please help this old man, my eye is not that good

@capythulhu
Copy link

capythulhu commented Jan 4, 2025 •
edited
Loading

it's been 10 years already, please just let us change the font lol

@Layhout
Copy link

Layhout commented Jan 6, 2025

it has been 10 years already, please just let us change the font lol

i don't care about ai. just let me change the font.

@manuartero
Copy link

Happy 2025! 🎄🎉🥳

This issue is now a full-fledged 10-year-old! 🎂 It's practically ready for middle school and deserves some Christmas gifts at this point. How you've grown, little issue.
here's to many more comments in the thread! 🥳

@Wachucol
Copy link

Ya dejen cambiarlo por favor

@Wachucol
Copy link

Wachucol commented Jan 10, 2025 via email

@joaomcarlos
Copy link

The current default font is too light and not sharp or bold enough, resulting in insufficient contrast in light mode, making it hard to read. For dark mode it's ok, for light mode it's a disaster Image the left is vsc with the default light modern theme and the right is jetbrains fleet with default light theme. The comparison may not be very accurate. Yet clearly, the right one is much easier to read. For now to fix this I have to use custom css loader plugin or fonted, both of which require modify the src code resulting vsc prompts corrupted. It would be lovely this option is provided

They should use the Inter font family. Far more readable.

@badrelmers
Copy link

omg 10 years , it is that difficult? come on

@aledef
Copy link

aledef commented Feb 4, 2025

Ground control to Microsoft... can you hear us? Do you copy?

@llvs
Copy link

llvs commented Feb 5, 2025

It will have been 10 years only by November 2025! They obviously feel like better not rushing out an immature solution ;-)

@rmbenham
Copy link

rmbenham commented Feb 6, 2025

wtb new explorer font pls

@linzhipeng98
Copy link

+1

@Wachucol
Copy link

Wachucol commented Feb 7, 2025 via email

@tf748i5gf5t
Copy link

Ten years later today, this problem still hasn't been solved. What is Microsoft really doing?

@Bedlessdeus
Copy link

Microsoft, you're doing great, you have a child but don't seem to care about it

@Wachucol
Copy link

Wachucol commented Feb 11, 2025 via email

@capythulhu
Copy link

I heard the issue solves itself when it turns 18 years old

@ecpantalone
Copy link

Image

@vasilich6107
Copy link

Makes sense to implement

@Wachucol
Copy link

Wachucol commented Feb 21, 2025 via email

@JosueEstrada
Copy link

any workaournds to change the ui font? or just wait for vscode team ....

@musm
Copy link

musm commented Feb 24, 2025

any workaournds to change the ui font? or just wait for vscode team ....

There are some hacky work arounds , but none are robust.

If you decide to wait it will probably be abother 10 years.

@dienerpatrick
Copy link

Image

@Wachucol
Copy link

Wachucol commented Feb 26, 2025 via email

@SergeyMosin
Copy link 

<style>.monaco-icon-label{zoom:1.1}</style>

This one line of CSS makes the side-panels' font size 10% bigger (the actual elements are highlighted), while keeping the rest of the UI font-size as is.

Image

Here is the shell script which add the line to workbench.html and also update the checksum in product.json so we don't get the corrupted... warning.

#!/bin/sh

set -e

css="<style>.monaco-icon-label{zoom:1.1}</style>"

action="${1:-patch}"

base_dir="${2:-$(dirname "$(readlink -f "$(which code)")")}"

workbench_html_id="vs/code/electron-sandbox/workbench/workbench.html"
workbench_html_file="$(realpath "$base_dir/../resources/app/out/$workbench_html_id")"
product_json_file="$(realpath "$base_dir/../resources/app/product.json")"

if [ ! -f "$workbench_html_file" ]; then
    echo >&2 "error: workbench.html not found at: $workbench_html_file"
    exit 1
fi

if [ ! -f "$product_json_file" ]; then
    echo >&2 "error: product.json not found at: $product_json_file"
    exit 1
fi

# backup just in-case
if [ ! -f "$workbench_html_file.bku" ]; then
    cp "$workbench_html_file" "$workbench_html_file.bku"
fi
if [ ! -f "$product_json_file.bku" ]; then
    cp "$product_json_file" "$product_json_file.bku"
fi

# clear the previous patch if re-patching after update or reverting
sed -i "\|$css|d" "$workbench_html_file"
echo "reset $workbench_html_file OK"

if [ "$action" != "revert" ]; then
    # (re)add the $css
    sed -i "\|<link rel=.*/workbench/workbench.desktop.main.css\">|a\
$css" "$workbench_html_file"
    echo "patch $workbench_html_file OK"
fi

hash="$(shasum -a 256 "$workbench_html_file" | cut -d " " -f 1 | xxd -r -p | base64 | tr -d '=')"

# update the checksum so we don't get the 'corrupted...' warning
sed -i "s|^\(.*\"$workbench_html_id\": \"\).*\(\".*\)$|\1$hash\2|" "$product_json_file"
echo "patch $product_json_file OK"

FYI: this script needs to be executed after each vscode update and root permissions might be required to run it

Tested on Ubuntu:

Version: 1.97.2
Commit: e54c774e0add60467559eb0d1e229c6452cf8447
Date: 2025-02-12T23:20:35.343Z
Electron: 32.2.7
ElectronBuildId: 10982180
Chromium: 128.0.6613.186
Node.js: 20.18.1
V8: 12.8.374.38-electron.0
OS: Linux x64 6.8.0-52-generic

@Wachucol
Copy link

Wachucol commented Mar 4, 2025 via email

@Elkeid-me
Copy link

Hope there will be an option to change the UI font, because it’s very very hard to distinguish between “ and ”, ‘ and ’ when the UI font is Microsoft YaHei or Segoe UI.

Image

@manuartero
Copy link

manuartero commented Mar 5, 2025 •
edited
Loading

for the last year i've just zoom in (CMD +) the whole UI, reduce the font size and now it feels so natural to me. (i think its a 20% zoom)

just commenting in case someone finds this useful

@babakfp babakfp mentioned this issue Mar 9, 2025
Open
@babakfp
Copy link

babakfp commented Mar 10, 2025 •
edited
Loading

Everyone that is looking forward to an option for customizing the font-family of the workbench, check out this PR: #242998, and don't forget to give it a thumbs up 👍! There's also a video preview to show how it works.

This PR is focused solely on adding a font-family option—nothing more. While it might not be exactly what you're looking for, it's a step in the right direction and better than nothing.

If this PR gets through, I'll follow up with another one that lets you add custom CSS and JS to the workbench. This will give you full customization control, without having to wait for new options or rely on hacky extensions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature-request Request for new features or functionality workbench-fonts
Projects
None yet
Milestone
On Deck
Development

Successfully merging a pull request may close this issue.

Add settings for changing the workbench font size and font ElijahPepe/vscode