Popular posts

I think it all depends on the project and what you're using it for. If you are making small tools, or websites where the size of the font doesn't really make a difference it's fine to use system fonts.

I find there's a certain class of bugs called 'font difference' bugs. Sometimes by using @fontface and supplying a font we can prevent this entire class of bugs from occurring, so if you ever run into any of these, perhaps using a custom font is a solution that will stop you from ripping your hair out trying to fix it.

• the navbar wraps to 2 lines on on some systems, but not others
• the vertical placements of a line of text inside <input> and <button> tags is too high or low, only on some systems
• the font looks too heavy or too thin on some systems
• etc.

For cases like this the easiest solution is to add the following CSS to try to make all of the fonts render in a similar way - but if you're still having problems from system-to-system using various system fonts, try Source Sans Pro. It's very well made, well spaced, and as a bonus it renders the same way in all browsers and all operating systems.

* {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: auto;
}

Even if you don't like the style of Source Sans, try using it for UI controls like menus, inputs, buttons, etc and see if it eliminates that entire class of 'font difference' bugs from your project.

<link href="fonts.googleapis.com/css" rel="stylesheet">

font-family: 'Source Sans Pro', sans-serif;