Allow custom fonts

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

@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

@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

@Just-Insane does this enable font ligatures? like converting => to the special char?

That is correct, it does the same as if you installed Fira Code for VS Code on your desktop. On Mar 13, 2020, at 12:09 PM, Merith <notifications@github.com> wrote: @Just-Insane<https://github.com/Just-Insane> does this enable font ligatures? like converting => to the special char? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#1374 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ADZKZDFECEUIBM7UKS62T53RHJLE5ANCNFSM4K4XF2LQ>.

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.

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/15f737a88b40ff76b1b61c28210d557fd39aca40/base/latest.Dockerfile#L209-L214.
ℹ️ 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

@jaredcwhite

or atleast an varient to what @jaredcwhite did, where the applications CSS automatically loads an customizations folder

@JWleo

@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

@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

@simon-bueler seems to be broken in Safari.

Hey

Does anyone have any idea how to do it with the latest build? I am using docker-compose with image lscr.io/linuxserver/code-server:latest.

If yoy are using a docker image, Create a dockerfile. ``` FROM containerimage RUN commands to apply the patches ``` And then use that new.Docker image built FROM basically says use this image as a base for these changes

…

On Tue, Sep 24, 2024, 12:29 PM Prateek Mohanty ***@***.***> wrote: Hey Does anyone have any idea how to do it with the latest build? I am using docker-compose with image lscr.io/linuxserver/code-server:latest. — Reply to this email directly, view it on GitHub <#1374 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACPQOXU3VCZETNFAC5OTI4TZYG4QTAVCNFSM6AAAAABKIDKOKSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZSGE4DKOBZGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

If yoy are using a docker image, Create a dockerfile. FROM containerimage RUN commands to apply the patches And then use that new.Docker image built FROM basically says use this image as a base for these changes
…
On Tue, Sep 24, 2024, 12:29 PM Prateek Mohanty @.> wrote: Hey Does anyone have any idea how to do it with the latest build? I am using docker-compose with image lscr.io/linuxserver/code-server:latest. — Reply to this email directly, view it on GitHub <#1374 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACPQOXU3VCZETNFAC5OTI4TZYG4QTAVCNFSM6AAAAABKIDKOKSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGNZSGE4DKOBZGE . You are receiving this because you were mentioned.Message ID: @.>

I have tried to do something like this

code-server:
    container_name: code-server
    image: lscr.io/linuxserver/code-server:latest
    restart: unless-stopped
    environment:
      - PUID=${CODE_SERVER_PUID}
      - PGID=${CODE_SERVER_PGID}
      - TZ=${CODE_SERVER_TZ}
      - SUDO_PASSWORD=${CODE_SERVER_SUDO_PASSWORD}
      - PROXY_DOMAIN=${CODE_SERVER_PROXY_DOMAIN}
      - DEFAULT_WORKSPACE=/workspace
      - DOCKER_MODS=linuxserver/mods:code-server-zsh|linuxserver/mods:code-server-nvm|linuxserver/mods:universal-package-install
      - INSTALL_PACKAGES=fontconfig
    volumes:
      - ./config/code-server/config:/config
      - /home/strangenoob/workspace:/workspace
      - ./fonts:/usr/share/fonts/custom 
      - ./custom/script.sh:/custom-cont-init.d:ro
    env_file: .env
    networks:
      - proxy
    healthcheck:
      test: [ "CMD", "curl", "-f", "http://localhost:8443/" ]
      interval: 30s
      timeout: 10s
      retries: 3
      start_period: 10s
    labels:
      - traefik.enable=true
      - traefik.http.routers.code-server.rule=Host(`code-space.example.com`)
      - traefik.http.routers.code-server.entrypoints=https
      - traefik.http.routers.code-server.tls.certresolver=cloudflare
      - traefik.http.services.code-server.loadbalancer.server.port=8443
      - traefik.http.routers.code-server.middlewares=authentik@docker`

With script file is like

#!/bin/sh
   set -e
   
   # Update font cache
   fc-cache -f -v /usr/share/fonts/custom

I have changed the settings but it didn't work.

{ 
      "editor.fontWeight": "normal",
       "editor.fontLigatures": true,
       "terminal.integrated.fontFamily": "'MesloLGS NF'",
       "terminal.integrated.fontSize": 16,
       "editor.fontFamily": "'FiraCode Nerd Font'",
}

But if I tried to access the list of font installed. Its showing FiraCode

➜  workspace fc-list     
/usr/share/fonts/truetype/dejavu/DejaVuSerif-Bold.ttf: DejaVu Serif:style=Bold
/usr/share/fonts/custom/MesloLGS NF Bold Italic.ttf: MesloLGS NF:style=Bold Italic
/usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf: DejaVu Sans Mono:style=Book
/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf: DejaVu Sans:style=Book
/usr/share/fonts/custom/FiraCode-Retina.ttf: Fira Code,Fira Code Retina:style=Retina,Regular
/usr/share/fonts/custom/FiraCodeNerdFont-Regular.ttf: FiraCode Nerd Font:style=Regular
/usr/share/fonts/custom/FiraCodeNerdFont-Bold.ttf: FiraCode Nerd Font:style=Bold
/usr/share/fonts/truetype/dejavu/DejaVuSansMono-Oblique.ttf: DejaVu Sans Mono:style=Oblique
/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf: DejaVu Sans:style=Bold
/usr/share/fonts/truetype/dejavu/DejaVuSansMono-BoldOblique.ttf: DejaVu Sans Mono:style=Bold Oblique
/usr/share/fonts/custom/FiraCode-Bold.ttf: Fira Code:style=Bold
/usr/share/fonts/custom/FiraCodeNerdFontPropo-Retina.ttf: FiraCode Nerd Font Propo,FiraCode Nerd Font Propo Ret:style=Retina,Regular
/usr/share/fonts/custom/FiraCode-Light.ttf: Fira Code,Fira Code Light:style=Light,Regular
/usr/share/fonts/custom/FiraCode-SemiBold.ttf: Fira Code,Fira Code SemiBold:style=SemiBold,Regular
/usr/share/fonts/custom/FiraCodeNerdFontPropo-Bold.ttf: FiraCode Nerd Font Propo:style=Bold
/usr/share/fonts/truetype/dejavu/DejaVuSansMono-Bold.ttf: DejaVu Sans Mono:style=Bold
/usr/share/fonts/custom/MesloLGS NF Regular.ttf: MesloLGS NF:style=Regular
/usr/share/fonts/custom/FiraCodeNerdFontPropo-SemiBold.ttf: FiraCode Nerd Font Propo,FiraCode Nerd Font Propo SemBd:style=SemiBold,Regular
/usr/share/fonts/custom/FiraCodeNerdFontPropo-Light.ttf: FiraCode Nerd Font Propo,FiraCode Nerd Font Propo Light:style=Light,Regular
/usr/share/fonts/custom/FiraCodeNerdFont-SemiBold.ttf: FiraCode Nerd Font,FiraCode Nerd Font SemBd:style=SemiBold,Regular
/usr/share/fonts/custom/FiraCodeNerdFont-Light.ttf: FiraCode Nerd Font,FiraCode Nerd Font Light:style=Light,Regular
/usr/share/fonts/custom/FiraCodeNerdFont-Retina.ttf: FiraCode Nerd Font,FiraCode Nerd Font Ret:style=Retina,Regular
/usr/share/fonts/custom/FiraCode-Regular.ttf: Fira Code:style=Regular
/usr/share/fonts/custom/FiraCode-Medium.ttf: Fira Code,Fira Code Medium:style=Medium,Regular
/usr/share/fonts/custom/FiraCodeNerdFontPropo-Medium.ttf: FiraCode Nerd Font Propo,FiraCode Nerd Font Propo Med:style=Medium,Regular
/usr/share/fonts/custom/MesloLGS NF Bold.ttf: MesloLGS NF:style=Bold
/usr/share/fonts/custom/MesloLGS NF Italic.ttf: MesloLGS NF:style=Italic
/usr/share/fonts/custom/FiraCodeNerdFontPropo-Regular.ttf: FiraCode Nerd Font Propo:style=Regular
/usr/share/fonts/custom/FiraCodeNerdFont-Medium.ttf: FiraCode Nerd Font,FiraCode Nerd Font Med:style=Medium,Regular
/usr/share/fonts/truetype/dejavu/DejaVuSerif.ttf: DejaVu Serif:style=Book

Perhaps it would be a good idea to provide a link to this issue in the FAQ section of the documentation?

i'm using brave and after some struggle, it was (magically) showing the custom font fine until yesterday ... then today i had to delete the container and start afresh and haven't been able to get it to work...

then i switched over to edge and voila! the custom font was working, so it is a browser issue,

so just change your browser's monospace font to the desired one and use monospace everywhere in code-server

@surajsharma

i'm using brave and after some struggle, it was (magically) showing the custom font fine until yesterday ... then today i had to delete the container and start afresh and haven't been able to get it to work...

then i switched over to edge and voila! the custom font was working, so it is a browser issue,

so just change your browser's monospace font to the desired one and use monospace everywhere in code-server

@surajsharma for issue with Brave, I think it was related to the Block fingerprinting settings had been enabled.
Please try to access the brave://settings/shields in address bar and turn off that option, and reload the editor again to see if it works. (FYI that it worked for me)

Navigation Menu

Repository navigation

Allow custom fonts #1374

Feature Request

67 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Allow custom fonts #1374

Description

Feature Request

Activity

Just-Insane commented on Feb 27, 2020

nhooyr commented on Feb 27, 2020

kylecarbs commented on Feb 27, 2020

gjrtimmer commented on Mar 5, 2020

demyxco commented on Mar 5, 2020

Merith-TK commented on Mar 10, 2020

Just-Insane commented on Mar 10, 2020

Merith-TK commented on Mar 10, 2020

kylecarbs commented on Mar 10, 2020

Just-Insane commented on Mar 10, 2020

Merith-TK commented on Mar 13, 2020

Just-Insane commented on Mar 13, 2020

gyzerok commented on May 13, 2020

67 remaining items

benz0li commented on May 30, 2023

jaredcwhite commented on Oct 19, 2023

dotNetCory commented on Dec 7, 2023

Merith-TK commented on Dec 7, 2023

demyxco commented on Dec 7, 2023

simon-bueler commented on Jul 2, 2024

demyxco commented on Jul 2, 2024

StrangeNoob commented on Sep 24, 2024

Merith-TK commented on Sep 24, 2024

StrangeNoob commented on Sep 24, 2024

SherkeyXD commented on Feb 19, 2025

surajsharma commented on Mar 22, 2025

sokomo commented on Mar 27, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions