Allow custom fonts

[gjrtimmer]

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

[Just-Insane]

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.

[nhooyr]

I would agree it should be a first class feature as fonts are a big part of editor customization and development.

[kylecarbs]

Will make this a priority. Agreed it's a big one.

[gjrtimmer]

Thank you, it would really help at lot of people.

[demyxco]

This would be an amazing feature so I can finally include a powerline font that would go great with Oh My Zsh.

[Merith-TK]

@Just-Insane you say this is possible with cloudflare? where and how?

[Just-Insane]

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

[Merith-TK]

neat, is it possible to make this an extension? to load a font off the internet?

[kylecarbs]

@Just-Insane very cool. Great workaround for now!

[Just-Insane]

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.

[Merith-TK]

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

[Just-Insane]

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>.