Server Side Custom Fonts with VSCode Server

This example is based on Ubuntu Mono downloaded from Google Fonts.

0. Go to the installation directory. The installation directory should contain bin/, extensions/, out/ and resources/ subdirectories.

   cd ~/.vscode-cli/server-stable-web/bin/b06ae3b2d2dbfe28bca3134cc6be65935cdfea6a/
   

   • For Microsoft’s Visual Studio Code Server it is in ~/.vscode-cli/server-stable-web/bin/<HASH>/.

   • For Gitpod’s openvscode-server, it is wherever the tarball is unpacked.

1. Create a font directory in the installation directory.

   cd ~/openvscode-server-v1.69.1-linux-x64/
   mkdir fonts
   

2. Copy the fonts files to the fonts directory.

   cp ~/Downloads/Ubuntu_Mono/*.ttf fonts/
   

3. Edit fonts/fonts.css to load the font files.

   @font-face {
       font-family: 'Ubuntu Mono';
       font-style: normal;
       font-weight: 400;
       src: url(UbuntuMono-Regular.ttf) format('truetype');
   }
   
   @font-face {
       font-family: 'Ubuntu Mono';
       font-style: normal;
       font-weight: 700;
       src: url(UbuntuMono-Bold.ttf) format('truetype');
   }
   
   @font-face {
       font-family: 'Ubuntu Mono';
       font-style: italic;
       font-weight: 400;
       src: url(UbuntuMono-Italic.ttf) format('truetype');
   }
   
   @font-face {
       font-family: 'Ubuntu Mono';
       font-style: italic;
       font-weight: 700;
       src: url(UbuntuMono-BoldItalic.ttf) format('truetype');
   }
   

4. Insert an @import statement at the top of out/vs/workbench/workbench.web.main.css to include the custom fonts.css.

   @import url("../../../fonts/fonts.css");
   /*!--------------------------------------------------------
    * Copyright (C) Microsoft Corporation. All rights reserved.
   ...
   

   NOTE: Imported rules must come before all other types of rules. See https://developer.mozilla.org/en-US/docs/Web/CSS/@import

5. Add our font to settings.json.

   {
       "editor.fontFamily": "'Ubuntu Mono', monospace",
   }
   

6. Reload the window to take effect.

Troubleshooting

Font is not loading

Clear the browser cache and reload the page.

Cursor is misaligned in the editor window

Try:

• Set "editor.disableMonospaceOptimizations": true,.
• Change "editor.fontLigatures".
• Change "editor.fontSize".