Server Side Custom Fonts with VSCode serve-web

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/serve-web/d78a74bcdfad14d5d3b1b782f87255d802b57511/
   

   • For Microsoft’s code serve-web it is in ~/.vscode-cli/server-stable-web/bin/<HASH>/.

     There’s a ~/.vscode/cli/serve-web/lru.json which likely contains the version hash.

1. Create a font directory in the installation directory.

   cd ~/.vscode/cli/serve-web/d78a74bcdfad14d5d3b1b782f87255d802b57511/
   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/code/browser/workbench/workbench.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".