Search code examples
cssprettify

Google Prettify Line numbers and Font

I have been playing with Prettify and I got it working quickly. However when I tried to change the font in the css file i can't seem to see any change in the browser. I am using Silver Stripe as a CMS. In the CSS file from the website I have:

.typography * {
    font-family: Ariel, sans-serif;
}

I have a separate CSS for prettify (and I know it works because the bg color changes, etc. only the font-family and font-size doesn't. Strangely font-weight does work).

pre.prettyprint, code.prettyprint {
    font-family:monospace; /* doesn't work why? */
    overflow: auto;
    display: block;
    font-size: 8pt; /* doesn't work */
    background-color: #333; /* this works */
}

I am using Safari. I don't understand what I am doing wrong? I only seem to get an Arial font.

Solution

  • Apparently Safari doesn't support the monospace correctly. See more about it: http://www.markwyner.com/post/16123207332/safari-vs-monospace-fonts

    Here you can find the appropriate font for Safari to support:
    http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

    For the not working measurement unit - pt try using another unit to see if it gives you any result. Let me know if it worked.