DEV Community

Seiya Izumi
Seiya Izumi

Posted on

2

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

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More