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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read 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