'Changing Developer Tools Font Face (family)
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.
Solution 1:[1]
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.
- Install DevTools Author Chrome extension from Chrome Web Store
- Enable Developer Tools experiments in chrome://flags/#enable-devtools-experiments. Restart Chrome for flags to take effect.
- 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.
Solution 2:[2]
- Enable devtools experimental features
- Open devtools settings, and in the experiments tab, enable UI theming
- Download DevTools Font Changer from chrome web store
- Open devtools settings, and in the Devtools Font Changer, Change the font in Font-Family input field
Solution 3:[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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Community |
| Solution 3 | Sylvain DNS |