Using the default OS font in CSS

If you’ve ever wanted to use the default font of the user’s operating system on your page, it could be a confusing mess for your font stack, or worse, having to use JavaScript to detect the user’s OS and select the right font to display. But I found this little snippet on css-tricks that makes it easier!

It’s super simple, and I’m surprised I didn’t know this before. To use the default OS font, you would just set your font-family: to caption. An example:

body {
font-family: caption;
}

  • On OS X Mavericks and earlier, this text is displayed in Lucida Grande.
  • On OS X Yosemite, this text is displayed in Helvetica Neue.
  • On OS X El Capitan, this text is displayed in San Francisco.
  • On iOS 8 and earlier, this text is displayed in Helvetica Neue.
  • On iOS 9, this text is displayed in San Francisco.
  • On Microsoft Windows XP and earlier, this text is displayed in Arial.
  • On Microsoft Windows Vista and later, this text is displayed in SegoeUI.
  • On Ubuntu Linux, this text is displayed in the Ubuntu font .
  • On Android Ice Cream Sandwich and later, this text is displayed in Roboto.
  • On Android Honeycomb and earlier, this text is displayed in Droid Sans.

Leave a Reply