Changing Developer Tools Font Face (family)

  1. Enable devtools experimental features
  2. Open devtools settings, and in the experiments tab, enable UI theming
  3. Download DevTools Font Changer from chrome web store
  4. Open devtools settings, and in the Devtools Font Changer, Change the font in Font-Family input field

This one I learnt from Darcy Clarke, and I got to his post by following a link by Paul Irish or Addy Osmany. I never thought there will come the day in which someone would ask for that very precise feature.

a) You need to enable devtools experimental features (open chrome://flags/#enable-devtools-experiments in your url field). Restart Chrome.

enter image description here

b) Open devtools settings, and in the experiments tab, enable UI theming

enter image description here

3.- Browse for devtools themes among chrome extensions or use Paul Irish's sample theme to build your own.

Enjoy!


I've created a small plugin which provides a collection of editor settings for Chrome Developer Tools, including the ability to set a custom font family enabled on your computer.

  1. Install DevTools Author Chrome extension from Chrome Web Store
  2. Enable Developer Tools experiments in chrome://flags/#enable-devtools-experiments. Restart Chrome for flags to take effect.
  3. Open DevTools (cmd + opt + I); Settings > Experiments > check Allow custom UI themes.

This will add an 'Author Settings' panel to Chrome Developer Tools, where you can edit the font-family being applied to the Chrome Developer Tools.

enter image description here