Allow custom fonts
gjrtimmer opened this issue · comments
Feature Request
I would like the ability to have the ability to have the font I use for all my development FireCode to be included so its pushed to the client.
I'm not really a star when it comes to CSS, but maybe this would be possible with something like a @font-face which would push the font to the client. Then when you configure the font in Code, because its pushed to the client you can have the FireCode font and ligatures without installing the font on the client.
I would also accept solutions from anyone, how to hack some files to get this working.
Hopefully I'm not the only one using this font.
With Kind Regards,
Gert-Jan Timmer
You can do this with a Cloudflare app in front of your sub domain for code. Works pretty well. Was not able to find a way to do it via reverse proxy/etc.
I would agree it should be a first class feature as fonts are a big part of editor customization and development.
Will make this a priority. Agreed it's a big one.
Thank you, it would really help at lot of people.
This would be an amazing feature so I can finally include a powerline font that would go great with Oh My Zsh.
@Just-Insane you say this is possible with cloudflare? where and how?
Under the Apps section for your domain in Cloudflare, you should find an app called "Add CSS" developed by Cloudflare Labs.
In the settings for this app, you select your subdomain that code-server is running on, and then enter the CSS:
@font-face {
font-family: 'Fira Code';
src: url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/woff2/FiraCode-Light.woff2') format('woff2'),
url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/woff/FiraCode-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Fira Code';
src: url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/woff2/FiraCode-Regular.woff2') format('woff2'),
url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/woff/FiraCode-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Fira Code';
src: url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/woff2/FiraCode-Medium.woff2') format('woff2'),
url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/woff/FiraCode-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Fira Code';
src: url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/woff2/FiraCode-Bold.woff2') format('woff2'),
url("https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/woff/FiraCode-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Fira Code VF';
src: url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/woff2/FiraCode-VF.woff2') format('woff2-variations'),
url('https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/woff/FiraCode-VF.woff') format('woff-variations');
/* font-weight requires a range: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Using_a_variable_font_font-face_changes */
font-weight: 300 700;
font-style: normal;
}I don't exactly remember where I found this from (CDN URL in the CSS), but the overall CSS file is available on github: https://github.com/tonsky/FiraCode/blob/master/distr/fira_code.css
neat, is it possible to make this an extension? to load a font off the internet?
@Just-Insane very cool. Great workaround for now!
There is probably a way you can intercept the pages using nginx/Apache as a reverse proxy, but I wasn’t able to get it working in the time I had.
@Just-Insane does this enable font ligatures? like converting => to the special char?
For me using FiraCode just works.
I am using macOS and I've added FiraCode to the OS. Probably if you register the font with other OSes it will work as well.
Might have been added to vscode-web.
cc @code-asher
Installing the font should always work but I think this feature request is for using a webfont which I don't believe is supported yet.
Installing the font should always work but I think this feature request is for using a webfont which I don't believe is supported yet.
Yes, this is for the web server telling the client to use a specific font (usually CSS). Installing a font on the OS of each system you may want to use is not always possible.
well installing the font assumes you are on a computer where you are able to do so.
Windows: requires admin+reboot to properly install font, and even then custom fonts may be disabled by an admin at a workplace
Linux: Requires that your computer actually knows how to handle the font (most systems are, but there is that one chance)
MacOS: No clue on this one, never used a mac for this sortof stuff
Chromebook: Name one way to install a font on a chromebook that is official from google and not a JS or CSS injection.
EDIT: just realized this ties in with
Yes, this is for the web server telling the client to use a specific font (usually CSS). Installing a font on the OS of each system you may want to use is not always possible.
MacOS: No clue on this one, never used a mac for this sortof stuff
Installing fonts on macOS requires users to open the font file they want to install then click the Install Font button in the new window. The font is now available system wide.
The ability to load any font (without it installed on the user’s machine) would make it possible to bundle the font(s) directly into a package. Example would be a Docker image; all my code-server containers are in remote machines.
honestly, making it so it loads custom font files from $DATA_DIR/fonts via some js in the actual code would work
What I noticed on MacOS and iPadOS is that even if you install custom fonts, Safari doesn't use them. Though somehow Firefox manages to display them. So it's an issue with Safari as far as I can tell. To overcome this, it would be nice if we could inject @font-face{url(/font/dir/font)} etc. without client-side code injection extensions. (Extensions are not allowed on ipadOS.)
@canbakiskan what could be done would be a simple addition to the code where it reads fonts and loads them in the CSS
@canbakiskan wrote:
What I noticed on MacOS and iPadOS is that even if you install custom fonts, Safari doesn't use them. Though somehow Firefox manages to display them. So it's an issue with Safari as far as I can tell. To overcome this, it would be nice if we could inject @font-face{url(/font/dir/font)} etc. without client-side code injection extensions. (Extensions are not allowed on ipadOS.)
I’m having the same issue. I’ve tried to use the SourceCodePro+Powerline+Awesome+Regular.ttf fonts in iPad without success. I installed custom fonts in iPad but seems the Safari, Firefox and Chrome don’t recognize the custom font even if "terminal.integrated.fontFamily": "SourceCodePro+Powerline+Awesome" has been configured in code-server’ settings.json.
Yes, it would be nice if we could inject @font-face{url(/font/dir/font)} and package the custom fonts in the code-server.
Regards.
For those of you who are still looking for a solution I've managed to solve this by using NGINX as a reverse proxy to serve the downloaded fonts from a custom directory injecting a custom css file.
Now I'm able to use VS Code on my iPad Pro with the programming ligatures enabled.
Here's my nginx config:
server {
listen 8081;
location / {
proxy_pass http://localhost:8080;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
sub_filter
'</head>'
'<link rel="stylesheet" type="text/css" href="/ios-fonts/css/fonts.css">
</head>';
sub_filter_once on;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_redirect off;
}
location /ios-fonts {
autoindex on;
root /var/www/html;
}
}And then I have inside /var/www/html this structure:
.
└── ios-fonts
├── css
│ └── fonts.css
└── fonts
├── FiraCode-Regular.woff
└── FiraCode-Regular.woff2
And this is the content of fonts.css
@font-face {
font-family: 'Fira Code';
src: url('/ios-fonts/fonts/FiraCode-Regular.woff2') format('woff2'),
url("/ios-fonts/fonts/FiraCode-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
}The reason I don't have any references to my domain or certificates on the nginx config is because I manage all my certificates using Traefik, so here's what I do:
[http.routers]
[http.routers.code-server]
entryPoints = ["https"]
rule = "Host(`vscode.mydomain.com`)"
service = "code-server"
middlewares = ["secureheaders"]
[http.routers.code-server.tls]
certresolver = "letsencrypt"
[http.services]
[http.services.code-server]
[http.services.code-server.loadBalancer]
[[http.services.code-server.loadBalancer.servers]]
url = "http://ip-of-code-server:8081"So yeah, although not ideal, kinda hacky and double proxied, that's the only solution I could find for now.
Thanks @mateusrevoredo !!
That's amazing.
My solution is inserting css directly to lib/vscode/out/vs/workbench/workbench.web.api.css to use my font in editor and powerline font in terminal. The only problem is you have to run patch again after you upgrading code-server. I created a shell script to do that, check it out, you can modify it to use your favorite fonts https://github.com/tuanpham-dev/code-server-font-patch
I have created a Pacman Hook that automatically insert Fira Code Font to website for Arch Linux users using method from tuanpham-dev's comment.
Below method will help you to load any font in vscode, I am loading Fira Code from Google fonts by loading in Nginx conf
location / {
proxy_pass http://127.0.0.1:8080/;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
proxy_set_header Host $host;
sub_filter '</head>' '<link type="text/css" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap" rel="stylesheet"></head>';
sub_filter 'font-src' 'font-src fonts.gstatic.com';
sub_filter 'style-src' 'style-src fonts.googleapis.com';
sub_filter_once on;
}
and than loading in my settings file
{
"editor.fontSize": 16,
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"editor.fontWeight": "500"
}
If you wants to add manually you can modify lib/code-server-3.6.0/src/browser/pages/vscode.html but keep note, it will break if you update vscode
add fonts before </head>
<link type="text/css" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap" rel="stylesheet">
and update Content-Security-Policy to allow loading those fonts
<meta
http-equiv="Content-Security-Policy"
content="font-src 'self' fonts.gstatic.com data:; connect-src ws: wss: 'self' https:; default-src ws: wss: 'self';
style-src 'self' 'unsafe-inline' fonts.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval';
manifest-src 'self'; img-src 'self' data: https:;"
/>
Thanks everyone for the inputs. I was able to add custom fonts to my ingress controller using nginx conf.
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
annotations:
kubernetes.io/ingress.class: nginx
nginx.ingress.kubernetes.io/rewrite-target: /$1
nginx.ingress.kubernetes.io/server-snippet: |-
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
proxy_set_header Host $host;
sub_filter '</head>' '<link type="text/css" href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap" rel="stylesheet"></head>';
sub_filter 'font-src' 'font-src fonts.gstatic.com';
sub_filter 'style-src' 'style-src fonts.googleapis.com';
sub_filter_once on;
...
Helm chart is here if anyone wants to see: https://github.com/sqylabs/charts/tree/master/charts/code-server
These dont solve the actual issue of having the fonts loaded. there are instances where people may be running code-server, on LAN and NOT behind a webserver like nginx or what you guys may use.
The original question appeared to want to load fonts from code-server itself. not having HTML injected by a webserver,
@Merith-TK Correct, I want to be able to configure this within the code-server itself
sudo sed -i 's/<\/head>/<link type="text\/css" href="https:\/\/fonts.googleapis.com\/css2?family=Fira+Code:wght@300;400;500;600;700\&display=swap" rel="stylesheet"><\/head>/g' /usr/lib/code-server/src/browser/pages/vscode.html
sudo sed -i 's/font-src/font-src fonts.gstatic.com/g' /usr/lib/code-server/src/browser/pages/vscode.html
sudo sed -i 's/style-src/style-src fonts.googleapis.com/g' /usr/lib/code-server/src/browser/pages/vscode.html
just make it as a shell script and run you can use Fira Code Font without install And also after an update you don't need to edit again. just run this script!! very simple!!!
okay. wouldnt it be more sane to write an extension for this? like execute JS to load CSS automatically?
@whtjs your solution is the cleanest and fastest way to import a font without using nginx or any other weird hacks. Thank you! Now I can automate installation of oh-my-zsh with a powerlevel10k theme.
If you use apache can use mod_substitute
` AddOutputFilterByType SUBSTITUTE text/html
Substitute "s|||i"
Substitute "s|font-src|font-src fonts.gstatic.com|"
Substitute "s|style-src|style-src fonts.googleapis.com|"`
What is the State right now? I want to use Fira Code... Do I have to use the Cloudflare hack?
Edit: Works using Cloudflare App, but would be cool as a Feature
What is the State right now? I want to use Fira Code... Do I have to use the Cloudflare hack?
Edit: Works using Cloudflare App, but would be cool as a Feature
You have to use the cloudflare hack, no way around it as far as i know.
What is the State right now? I want to use Fira Code... Do I have to use the Cloudflare hack?
Edit: Works using Cloudflare App, but would be cool as a Feature
You can use cloudflare hack, or mod_substitute on apache as I show above
Using sed to edit /usr/lib/code-server/src/browser/pages/vscode.html works for me but the fonts are hosted on my site and on a different domain.
@demyxco What did you change?
@kaaax0815 see my repo https://github.com/demyxco/code-server/blob/master/tag-latest/Dockerfile#L113-L124
Can confirm on my iPad that it works; it doesn't have the MesloLGS NF fonts installed locally.
But that also assumes that the user is using code-server in docker. which does not match 100% usecases
also what is that theme? looks sick
@Merith-TK I don't have experience in using code-server outside of Docker but I'm assuming you can just edit that same file and it'll load it anyways?
The theme is called Material Theme.
I'm assuming you can just edit that same file and it'll load it anyways?
Yes thats true. But I think a proper feature would be better, then like a hacky tutorial,
Its in Triage, so it does get looked on in the feature, but a reference in the docs would be good until a proper release
sudo sed -i 's/<\/head>/<link type="text\/css" href="https:\/\/fonts.googleapis.com\/css2?family=Fira+Code:wght@300;400;500;600;700\&display=swap" rel="stylesheet"><\/head>/g' /usr/lib/code-server/src/browser/pages/vscode.html sudo sed -i 's/font-src/font-src fonts.gstatic.com/g' /usr/lib/code-server/src/browser/pages/vscode.html sudo sed -i 's/style-src/style-src fonts.googleapis.com/g' /usr/lib/code-server/src/browser/pages/vscode.htmljust make it as a shell script and run you can use Fira Code Font without install And also after an update you don't need to edit again. just run this script!! very simple!!!
@whtjs You're an absolute legend. I was pulling my hair out. Thanks.
hterm handles this by bundling a few popular fonts, and then allowing custom CSS to inject web fonts.
Since on Chrome OS there is no way to install system-wide fonts, I believe this is a matter of VS Code feature parity.
I mean theoretically It should not be that hard to add a setting to code-server that is just a list of fonts and their locations, somewhat like this?
{ "codeserver.fonts": [
{
"name": "Font Name",
"type": "url",
"source": "https://example.com/font.file"
},
{
"name": "Font Name",
"type": "file",
"source": "/home/coder/.fonts/font.file" // Must be accessible by Code-Server
},
]}For url it would just load that as an external resource using its own CSS
for file it would copy the font file to a tempdir and serve that alongside its own CSS
Accepting a list of webfonts to load via CSS makes sense as a solution here, it doesn't require anything specific on the computer you load the code-server URL in. 👍
It would be more flexible to accept either CSS snippets or CSS URLs (or both). The hterm document includes this example:
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');If you load that URL you'll see that there are two different woff2 files referenced depending on the glyphs. So if you type a non-Latin letter, an additional woff2 would be downloaded to display it. Fira Code is the same: https://fonts.googleapis.com/css2?family=Fira+Code I wouldn't want to reinvent this glyph stuff inside some code-server-specific config format 😅
Version 4.x broke the custom font hack since code-server/src/browser/pages/vscode.html doesn't exist anymore 😔
Also a header setting is preventing external fonts from loading:
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'".
@demyxco There is <install-path>/vendor/modules/code-oss-dev/out/vs/code/browser/workbench/workbench.html now.
@benz0li awesome, can confirm it works on my iPad, which has no other fonts installed.
@demyxco What's your fix for the header error?
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'".
@bjun626 you have to load the fonts locally and not remotely https://github.com/demyxco/code-server/blob/master/tag-latest/Dockerfile#L112-L125.
Pretty much place the fonts in the public directory /usr/local/lib/code-server/src/browser/pages and the font-face url would be _static/src/browser/pages/your-custom-font.woff.
@bjun626 you have to load the fonts locally and not remotely https://github.com/demyxco/code-server/blob/master/tag-latest/Dockerfile#L112-L125.
Pretty much place the fonts in the public directory
/usr/local/lib/code-server/src/browser/pagesand the font-face url would be_static/src/browser/pages/your-custom-font.woff.
No, you don't. Using CDN to load web fonts would be a much better choice. And here's my approach.
<!-- <install-path>/vendor/modules/code-oss-dev/out/vs/code/browser/workbench/workbench.html -->
<!-- ... -->
<script>
@import url('https://fonts.googleapis.com/css?family=Fira+Code');
</script>
<!-- ... -->All I need to do is updating CSP:
cd <install-path> # for me it's /usr/lib/code-server
# update style-src
grep -rl "style-src 'self' 'unsafe-inline'" . | sudo xargs sed -i "s/style-src 'self' 'unsafe-inline'/style-src 'self' 'unsafe-inline' fonts.googleapis.com/g"
# update font-src
grep -rl "font-src 'self' blob:" . | sudo xargs sed -i "s/font-src 'self' blob:/font-src 'self' blob: fonts.gstatic.com/g"
# then restart `code-server`
sudo systemctl restart code-server@$USERHope this can help you @bjun626
@ManiaciaChao many ways to go about this 👌 interesting approach though. Since mine is a Docker setup, I'll have to include the fonts during build.
I've attempted to build off of @moelife-coder's pacman hook for the new folder structure: https://gist.github.com/JettScythe/6d98633d5f98730661127bfe3dbc68a4
But still no luck when using Fira Code as my terminal font family. Any suggestions?
EDIT:
Just as a follow up, I removed Fira Code as my font & downloaded the 'MesloLGS NF' font family from https://github.com/romkatv/powerlevel10k#meslo-nerd-font-patched-for-powerlevel10k.
Everything appears to be working now!
@ManiaciaChao version 4.2.0, the workbench.html's path is changed:
<install-path>/vendor/modules/code-oss-dev/out/vs/code/browser/workbench/workbench.html
to <install-path>/lib/vscode/out/vs/code/browser/workbench/workbench.html
However, unless workbench.html's name is changed, this command might always work to load web font(Fira Code Regular).
(the path of workbench.html doesn't matter!)
cd /usr/lib/code-server #my install path
#find workbench.html and add style code
find . -name workbench.html | sudo xargs sed -i "s%</head>%<style>@import url('https://fonts.googleapis.com/css2?family=Fira+Code\&display=swap');</style></head>%g"Therefore, you can apply the font by executing this command.
cd /usr/lib/code-server #my install path
#find workbench.html and add style code
find . -name workbench.html | sudo xargs sed -i "s%</head>%<style>@import url('https://fonts.googleapis.com/css2?family=Fira+Code\&display=swap');</style></head>%g"
# update style-src
grep -rl "style-src 'self' 'unsafe-inline'" . | sudo xargs sed -i "s/style-src 'self' 'unsafe-inline'/style-src 'self' 'unsafe-inline' fonts.googleapis.com/g"
# update font-src
grep -rl "font-src 'self' blob:" . | sudo xargs sed -i "s/font-src 'self' blob:/font-src 'self' blob: fonts.gstatic.com/g"
# then restart code-serverEDIT:
workbench.html's path in 4.3.0 is same as 4.2.0!
Can anyone help me with integrating patched Nerd Font on the app?
I have tried multiple versions, but it seems that it doesn't work.
It doesn't recognize the Nerd Font at all, even through it's installed on the system.
I'm running a manjaro system with the server installed locally.
i have done it!!!
i use powerlevel10k on the latest version of code-sever.
if you want to change the fonts of code-sever,you must change your fonts on web browser.
then you can use oh-my-zsh just like normal（ show it below）.
@gjrtimmer @nhooyr @JettScythe
@JWleo I forgot to mention the powerlevel10k font isn't installed locally on the iPad. To remove that keyboard toolbar icon, go to Settings > General > Keyboard then toggle off Shortcuts and Predictive.
@JWleo I forgot to mention the powerlevel10k font isn't installed locally on the iPad. To remove that keyboard toolbar icon, go to Settings > General > Keyboard then toggle off Shortcuts and Predictive.
me too. The powerlevel10k just need to install on the server-device, and you just install the fonts on your own device to call the powerlevel10k on server.
@ManiaciaChao version 4.2.0, the
workbench.html's path is changed:<install-path>/vendor/modules/code-oss-dev/out/vs/code/browser/workbench/workbench.htmlto<install-path>/lib/vscode/out/vs/code/browser/workbench/workbench.htmlHowever, unless
workbench.html's name is changed, this command might always work to load web font(Fira Code Regular). (the path ofworkbench.htmldoesn't matter!)cd /usr/lib/code-server #my install path #find workbench.html and add style code find . -name workbench.html | sudo xargs sed -i "s%</head>%<style>@import url('https://fonts.googleapis.com/css2?family=Fira+Code\&display=swap');</style></head>%g"Therefore, you can apply the font by executing this command.
cd /usr/lib/code-server #my install path #find workbench.html and add style code find . -name workbench.html | sudo xargs sed -i "s%</head>%<style>@import url('https://fonts.googleapis.com/css2?family=Fira+Code\&display=swap');</style></head>%g" # update style-src grep -rl "style-src 'self' 'unsafe-inline'" . | sudo xargs sed -i "s/style-src 'self' 'unsafe-inline'/style-src 'self' 'unsafe-inline' fonts.googleapis.com/g" # update font-src grep -rl "font-src 'self' blob:" . | sudo xargs sed -i "s/font-src 'self' blob:/font-src 'self' blob: fonts.gstatic.com/g" # then restart code-serverEDIT:
workbench.html's path in 4.3.0 is same as 4.2.0!
In 4.4.0, this doesn't seem to work, as vscode's iframe has a security policy that you cannot override. Any ideas?
@Sharpz7 - I have updated the font patch for version 4.4.0. If you don't find any solution, try mime. https://github.com/tuanpham-dev/code-server-font-patch
Yeah this works. Thank you!
@JWleo me too and it works on my iPad.
How’d you get this working on the iPad?
@dylanspag before you want to change the fonts of code-sever,you must change your fonts on web browser.
you can get some app to install your own fonts of power10k to your ipad,and at the same time you will install the fonts on your web-browser. Then using the browser to open your code-server site.
Now you can use oh-my-zsh just like normal
The Nginx method ain't working for me. Any help is appreciated. I am checking the index.html I am getting from the server and it is missing the link I am adding with sub_filter.
server {
listen 8081;
server_name pipad.local;
location / {
proxy_pass http://localhost:8080;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_set_header Accept-Encoding gzip;
sub_filter '</head>' '<link rel="stylesheet" type="text/css" href="/custom/fonts/index.css"></head>';
sub_filter_once on;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_redirect off;
}
location /custom {
autoindex on;
root /var/www/code-server;
}
}
Edit: I haven't enabled SSL yet.
Its really insane how slow this project is to implement something or solve bugs. I have been trying to complete this setup for 2 days and every issue I came across is still unresolved even though they are so trivial. Imagine having to wait 2-3 years to get native custom font support. Even if the maintainers are busy, 3 years is just way too long. Jesus.
Its really insane how slow this project is to implement something or solve bugs.
@ThatAnonyG You are always welcome to contribute.
I have been trying to complete this setup for 2 days and every issue I came across is still unresolved even though they are so trivial. Imagine having to wait 2-3 years to get native custom font support. Even if the maintainers are busy, 3 years is just way too long. Jesus.
There are several [working] ways to enable custom fonts.
it would be nice if we could have a wiki page or something explaining the methods that are currently working.
Feel free to raise a PR and add it to the docs!
I think that we have to find a way to hammer out the different methods and turn them into Wiki pages as suggested.
The Nginx method ain't working for me. Any help is appreciated. I am checking the index.html I am getting from the server and it is missing the
linkI am adding withsub_filter.server { listen 8081; server_name pipad.local; location / { proxy_pass http://localhost:8080; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-NginX-Proxy true; proxy_set_header Accept-Encoding gzip; sub_filter '</head>' '<link rel="stylesheet" type="text/css" href="/custom/fonts/index.css"></head>'; sub_filter_once on; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_redirect off; } location /custom { autoindex on; root /var/www/code-server; } }Edit: I haven't enabled SSL yet.
@ThatAnonyG The issue might be caused by the Accept-Encoding header being set to gzip, which can result in compressed responses from code-server. The sub_filter directive doesn't work with compressed responses (only works with plain text), so the substitution won't take effect.
If code-server sends a compressed response, Nginx will ignore it. Try setting the Accept-Encoding header to an empty string ("" instead of gzip) to indicate that Nginx doesn't accept compressed responses.
None of the above works...
Or how should I say it... I saw the font changed, but the glyph is ugly unresolved.
Then what is the whole point changing fonts?
None of the above works...
@J4gQBqqR #1374 (comment) works just fine.
ℹ️ Be aware of #1374 (comment).
None of the above works...
@J4gQBqqR #1374 (comment) works just fine. ℹ️ Be aware of #1374 (comment).
Sorry, it does not work:
./code-font.sh
sed: can't read /usr/lib/code-server/src/browser/pages/vscode.html: No such file or directory
sed: can't read /usr/lib/code-server/src/browser/pages/vscode.html: No such file or directory
sed: can't read /usr/lib/code-server/src/browser/pages/vscode.html: No such file or directory
ls /usr/lib/code-server/src/browser/pages
error.css error.html global.css login.css login.html
The code server that I use is the latest build installed by yay in Arch Linux. As you can see, this file does not exist.
It seems to me that all the solutions above are building on shifting sands and depending on broken promise.
I've spent hours on trying this, regretfully finding that there is no stable solution.
It seems to me that all the solutions above are building on shifting sands and depending on broken promise.
I successfully use https://github.com/b-data/jupyterlab-r-docker-stack/blob/main/base/latest.Dockerfile#L210-L215.
ℹ️ Release: code-server-4.13.0-linux-amd64.tar.gz; installation path: /opt/code-server; assets at <installation-path>/src/browser/media
Check out https://demo.jupyter.b-data.ch. Login with GitHub account.
I've spent hours on trying this, regretfully finding that there is no stable solution.
@J4gQBqqR File location may change over time, so you have to adapt your script.
For anyone looking for a solution using Caddy reverse proxy on macOS (as I happen too), here you go! In Caddyfile:
your.domain.name {
handle_path /my_extras/* {
root * /Users/yourusername/apps/code-server-extras
file_server
}
handle {
reverse_proxy 127.0.0.1:8080
}
}And then I had to locate the main CSS file which was in:
/opt/homebrew/Cellar/code-server/4.17.1/libexec/lib/vscode/out/vs/workbench/workbench.web.main.css
and add something like @import "/my_extras/path/to/stylesheet.css";
That would include the necessary @font-face directives pointing to locally-installed font files. And yes, works on iPad!
You know, this would be really handy to set up for accessibility reasons
or atleast an varient to what @jaredcwhite did, where the applications CSS automatically loads an customizations folder
@JWleo me too and it works on my iPad.
How’d you get this working on the iPad?
Sorry for the late reply but the file I modified is workbench.html, see more in my repo https://github.com/demyxsh/code-server/blob/1447f123bdf31abe70a7394ffe062da7a1674cf2/tag-browse/Dockerfile#L112-L127
@demyxco Does it work in Safari on iPad if so, how did you get it to work? For me it only works in other browsers.
@simon-bueler seems to be broken in Safari.