27

After hours of research, I give up.

Is there any straightforward way to hack Dev Tools and change the font family they are using? I'm spending many hours looking at this window so I'd love if I could use a monospaced font of my choice.

0

4 Answers 4

34

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

2
  • 6
    it stopped working late last year (i.e. it doesn't work in the more recent versions of Chrome)...
    – Cobra
    Jan 16, 2018 at 20:17
  • 7
    STOPPED WORKING :(
    – Azimi Dev
    Jun 5, 2018 at 11:31
20

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!

4
  • Did anyone have it working with @font-face ? I'm trying to load the fonts using the urls in use for the custom images of themes, like src: url(chrome-devtools://devtools/bundled/fonts/ProximaNova-Regular.otf) format('opentype'); Sep 18, 2014 at 17:06
  • Seems this experiments flag no longer works, so most of these answers are dead in the water.
    – jerclarke
    Jul 14, 2020 at 19:14
  • I don't want to install third party plugins when I don't know if I can trust them.
    – fose
    Mar 16, 2023 at 7:47
  • Is there anything similar for MS Edge? I've change the default font-family but the dev tools still showing in consolas. Any ideas? Nov 24, 2023 at 8:47
6
  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
5
  • As noted in other comments, the whole flag in Chrome is now gone, so none of these solutions work anymore.
    – jerclarke
    Jul 14, 2020 at 19:15
  • @jerclarke DevTools Font Changer extension is working just fine.
    – pakoray
    May 10, 2021 at 22:33
  • Ok the self-description of the extension still tells you to use a flag that no longer exists, that's why I wrote the comment. If you are managing to get the extension to work anyway, I'll give it a shot with the updated instructions above.
    – jerclarke
    Jun 25, 2021 at 1:02
  • 1
    Look at that, it can work! Got my Jetbrains Mono in the editor, thanks for the reply!
    – jerclarke
    Jun 25, 2021 at 1:03
  • Worked for me too. Now I have Recursive.design everywhere!
    – krry
    Oct 28, 2021 at 0:16
3

You don't need to use devtools experiments if you only want ton customize devtools font. Just go in settings and change fixed-width font : chrome://settings/fonts?search=font

3
  • Didn't work for me - only the "DevTools Font Changer" extension + "Allow custom UI themes"
    – Isaace
    Sep 9, 2020 at 16:26
  • Same for me. It doesn't seem to have any effect (despite finding that setting and altering it), but following the specific instructions in Zeeshan's answer above did work.
    – jerclarke
    Jun 25, 2021 at 1:05
  • 1
    Good idea, but that setting doesn't effect Developer Tools, only view source. Jan 19, 2023 at 18:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.