DEV Community

Seiya Izumi
Seiya Izumi

Posted on

How to use monospace fonts in Safari console

The default font on error console of Safari 9 is not monospace.

I really don't like this.

safari error console

I would like to change it, but it seems that error console does not have any preference, so to change it, I had to edit css settings manually.

The path of the file to edit is /System/Library/StagedFrameworks/Safari/WebInspectorUI.framework/Versions/Current/Resources/Main.css.

Looking into the file, we can find these lines at somewhere.

.console-messages {
    display: flex;
    flex-direction: column;
    word-wrap: break-word;
    font-family: -webkit-system-font, sans-serif;
    font-size: 12px;
    min-height: 100%;
    outline: none
}

Change a little bit on font attributes like below.

.console-messages {
    ...

    font-family: Menlo, monospace;
    font-size: 10px;
}

Now we got a monospace font!

monospace font safari

Related: http://stackoverflow.com/questions/27912919/how-do-i-change-the-web-inspector-font-for-safari-8

Top comments (0)