Skip to content

feat: use JetBrains Mono as editor font

Tomas Vik requested to merge change-fonts into main

This MR uses the @gitlab/fonts npm package to add JetBrains Mono fonts to the web-ide package. It also changes the default VS Code settings to use JetBrains Mono as editor font.

Screenshot_2022-12-19_at_14.12.43

This MR adds another configuration object:

export interface FontConfig {
  /**
    Used in the VS Code settings.json (e.g. as 'editor.fontFamily').
    It will also be used in the @font-face/font-family CSS attribute.
  */
  fontFamily: string;
  /**
    Specifies the mime type in preload link (type='font/${format}') and
    in the @font-face/src/format CSS attribute.
    For available values, check https://www.iana.org/assignments/media-types/media-types.xhtml#font
  */
  format: string;
  /**
    Contains the full URL of the font resource.
    It's used in the preload link and in the @font-face/src/url CSS attribute.
   */
  srcUrl: string;
}

And the example app is using this object to configure JetBrains Mono as the font.

Also, I tested in gitlab!109188 (merged) that the config can be passed in from Rails.

Edited by Tomas Vik

Merge request reports

Loading