Which monospace font does a browser use?

css fonts webfonts
nickh picture nickh · May 3, 2013 · Viewed 15.4k times · Source

With CSS, if you specify font-family: monospace;, my understanding is that the browser chooses its default/preferred monospaced font.

If that's correct, how can you determine which monospaced font your browser is using?

Answer

nickh picture nickh · May 3, 2013

There are 5 generic families that can be used: "serif", "sans-serif", "cursive", "fantasy", and "monospace". When a browser sees one of those, it asks the operating system for the default font in that family.

Thus, which font a web browser uses is OS-dependent.

See Mozilla's documentation on font-family for details.

Related questions

How do I install a custom font on an HTML site

I am not using flash or php - and I have been asked to add a custom font to a simple HTML layout. "KG June Bug" I have it downloaded locally - is there a simple CSS trick to accomplish …

Read More
Webfont Smoothing and Antialiasing in Firefox and Opera

I have custom-made web fonts used on my site. To style my rendering output, I used the following code: //-webkit-text-stroke-width: .05px; //-webkit-text-stroke-color: white; -webkit-font-smoothing: antialiased; This works fine on Safari and Chrome (edges are sharper and lines are thinner). Is …

Read More
Use multiple @font-face rules in CSS

How can I use more than @font-face rule in my CSS? I've inserted this into my stylesheet: body { background: #fff url(../images/body-bg-corporate.gif) repeat-x; padding-bottom: 10px; font-family: 'GestaRegular', Arial, Helvetica, sans-serif; } @font-face { font-family: 'GestaReFogular'; src: url('gestareg-webfont.eot'); src: …

Read More