Hyper.js terminal settings with Fira Code

.hyper.js

// This configuration is meant to be used in WSL v1 for Windows
// It is also not maintained anymore, as I switched to Windows Terminal

module.exports = {
  config: {
    // Disabling WebGL renderer to make font-ligatures work
    // https://github.com/tolbertam/hyper-font-ligatures#disabling-webgl-rendering
    webGLRenderer: false,
    
    // default font size in pixels for all tabs
    fontSize: 24,

    // font family with optional fallbacks
    fontFamily: '"Fira Code", Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',

    // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
    cursorColor: '#1df9ca',

    // `BEAM` for |, `UNDERLINE` for _, `BLOCK` for █
    cursorShape: 'BLOCK',

    // color of the text
    foregroundColor: '#fff',

    // terminal background color
    backgroundColor: '#0f111d',

    // border color (window, tabs)
    borderColor: '#1df9ca',

    // custom css to embed in the main window
    css: '',

    // custom css to embed in the terminal window
    termCSS: `
    x-screen x-row {
        font-variant-ligatures: initial;
    }
    `,

    // custom padding (css format, i.e.: `top right bottom left`)
    padding: '15px 15px',

    // the full list. if you're going to provide the full color palette,
    // including the 6 x 6 color cubes and the grayscale map, just provide
    // an array here instead of a color map object
    // Set the theme variant,
    colors: {
      black: '#000000',
      red: '#F33F75',
      green: '#91F894',
      yellow: '#E5F99F',
      blue: '#4E93F4',
      magenta: '#fd90ff',
      cyan: '#8AEFFF',
      white: '#FCFCFC',

      // Light Colors
      lightBlack: '#84858f',
      lightRed: '#F33F75',
      lightGreen: '#91F894',
      lightYellow: '#E5F99F',
      lightBlue: '#D7C5FB',
      lightMagenta: '#fd90ff',
      lightCyan: '#A8D1FF',
      lightWhite: '#FFFBFA'
    },

    // the shell to run when spawning a new session (i.e. /usr/local/bin/fish)
    // if left empty, your system's login shell will be used by default
    shell: 'c:\\windows\\system32\\bash.exe',

    // for setting shell arguments (i.e. for using interactive shellArgs: ['-i'])
    // by default ['--login'] will be used
    shellArgs: ['--login'],

    // for environment variables
    env: {},

    // set to false for no bell
    bell: 'SOUND',

    // if true, selected text will automatically be copied to the clipboard
    copyOnSelect: true

    // URL to custom bell
    // bellSoundURL: 'http://example.com/bell.mp3',
    // for advanced config flags please refer to https://hyper.is/#cfg
  },

  // a list of plugins to fetch and install from npm
  // format: [@org/]project[#version]
  // examples:
  //   `hyperpower`
  //   `@company/project`
  //   `project#1.0.1`
  // "hyperterm-mactabs",
  // 'hyper-sierra-vibrancy',
  plugins: [ "hyperblue-vibrancy", "hyper-statusline", "hyperterm-tab-icons", "hyperterm-close-on-left", "hyperterm-paste", "hyperlinks", "hypercwd", "hypertitle"],

  // in development, you can create a directory under
  // `~/.hyper_plugins/local/` and include it here
  // to load it and avoid it being `npm install`ed
  localPlugins: [],
};

do you mean hyper doesn't work at all with GPU rendering or is it one of the plugins?

termCSS: `
    x-screen x-row {
        font-variant-ligatures: initial;
    }
    `,

Just don't work in Hyper3.0, I guess because it is using WebGL rendering ,so Fira Code won't work.

@linonetwo I actually found out you can get around this by disabling WebGL rendering, if you're interested I found a write up here: https://github.com/tolbertam/hyper-font-ligatures#disabling-webgl-rendering cheers!

@ryanwarsaw Thanks for sharing

Just a heads up: this is meant for running on Windows, right?
The shell option points to Windows CMD and it was throwing error execvp(3) failed: No such file or directory

Removing that specific line solved the problem.

@atmonello I think the file won't exist if you don't have the Windows SubSystem for Linux enabled

@atmonello yes, this is for windows running the first version of Windows Subsystem for Linux. As I don't use any longer hyper.js I haven't updated it for a long while

Thanks! This works great for OSX. I had to add webGLRenderer: false to my existing config.

@ryanwarsaw I updated hyper.js with the settings below and I couldn't get the Fira Code or MesloLGL font to work. The version of hyper that is installed is 3.2.0

module.exports = {
  config: {
    fontFamily: '"MesloLGL Nerd Font Bold", "Fira Code Light", Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',
    webGLRenderer: false,
  },
  plugins: [
    "hyper-font-ligatures"
  ],
};

I want to make the exa --icons -la command icons work, today it appears as an unknown character.

In Ubuntu 20.04 default terminal it's already working

@XavierJece I ended up switching back to iTerm2, I don't see anything in your configuration that looks wrong - I would make sure you're using a patched font (it looks like you are), you may also try to after your entry for the bold font, import the regular version. May be possible that the bold version doesn't have all the glyphs you're needing, good luck!

This part of his configuration may also be useful for you:

// custom css to embed in the terminal window
    termCSS: `
    x-screen x-row {
        font-variant-ligatures: initial;
    }
    `,

I was wrestling with this today. I'm using Hyper on Windows 10 Pro. For others who might be wrestling with this, I also was having issues where the font would create tiny boxes with question marks. Turns out it was because my version of Windows 10 Pro was not activated. I found this out by trying to search for Fonts in the settings, and was unable to search for any of the Nerd Fonts I thought I had downloaded. Activating Windows 10 Pro fixed the problem as soon as I reloaded.