How to change Firebug default font in Firefox

If you’re a designer or a developer and don’t like the default font of Firebug, here I am showing you a trick to change font family of Firebug in Firefox.

[Step 1] Install Stylish add-on for Firefox from the link : https://addons.mozilla.org/en-US/firefox/addon/stylish/

Screenshot:
How to change Firebug default font in Firefox

[Step 2] Go to Tools > Add-ons, and click on User Styles

[Step 3] Click on Write New Style and Input Name whatever you like. In my case, I have given ‘Source Code Pro font for Firebug’. Then in Insert area, insert the following code :

.panelNode-html *, .panelNode-stylesheet *, .panelNode-css * {
    font-family: 'Source Code Pro' !important;
    font-size: 12px !important;
}

.objectLink div {
    font-family: sans-serif !important;
    font-weight: normal;
}

.highlightOpen .nodeLabel {
    background: transparent !important;
}

.panelNode-css .groupHeader {
    color: #75715e !important;
    background: transparent !important;
    border: dashed 1px #75715e !important;
    border-left: none !important;
    border-right: none !important;
    padding: 4px !important;
    margin: 10px 0 !important;
}

* Source Code Pro font from Google

Screenshot:
How to change Firebug default font in Firefox

Click Save and you’re done!

Screenshot:
How to change Firebug default font in Firefox

Tutorial: How to change Firebug default font in @Firefox. cc.: @mozillafirefox Click To Tweet

2 thoughts on “How to change Firebug default font in Firefox

  1. thanks for help!!!! very~thank you!!

Leave a Reply


Please note: These tutorials are meant to be helpful, but please note that I can not and will not be able to help with any implementations or modifications.

tl;dr If you do not understand it, hire me to do it.