css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Font: caption; seems to do the trick on all other operating systems except iOS. This is forked from Joe Richardson's Pen YyxKBj.

This Pen is a fork of Joe's Pen Use the operating system font as the base font style..


  1. doesn't work for me. I see all of them in same fonts. default sans-serif. Ubuntu - Chrome 47

  2. When you say ‘Unfortunately “font: caption” breaks completely on iOS’, what do you mean? It doesn't change the font, it explodes, something more sinister?

  3. @benschwarz on iOS, using “font:caption” seems to always set the font-family to “Times.”

    Updated the description!

  4. @praveenpuglia That sounds to me like it’s actually working! Sorry for the confusing demo from my part. If it works, they should be all using the same default Operating System font.

  5. Windows 10 reporting in: Still uses Arial in all browsers that aren't Edge/IE. Theoretically this is true for every version of Windows.

    Would love to see this get supported though.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.