htmlcssfontstypographysystem-font

How to set css system fonts for serif'd fonts


https://css-tricks.com/snippets/css/system-font-stack/ Found this awesome link on how to make leverage system fonts. This example only shows sans-serif:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Question: what would be the matching serif version of the snippet above?


Solution

  • Operating systems generally don't use serif fonts like that, unless set explicitly by the user, so -apple-system won't have a serif version, but you can just use serif (without the other fonts you have listed) to use the browser's default serif font.