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.