Hello @regina23d,

I've tried to answer your question to the best of my knowledge below:

Summary:

System fonts can be specific to a particular operating system and therefore may be only present on a single operating system. It is advisable to use web-safe fonts or font stacks that include system fonts compatible for a range of operating systems to ensure your design/product looks the way you intended it to look.

---

System fonts:

System fonts are fonts that come pre-installed on a user's computer system. System fonts can be specific to a particular operating system and therefore may be only present on one operating system. For example, San Francisco is the primary system font for new Mac OS systems and is exclusive to these systems.

Web-safe fonts:

Web-safe fonts are fonts that are like to be present on a wide range of systems. They are used by designers/developers in order to increase the chance that their content will be displayed as intended.

Reliable sans-serif typefaces include:

• Arial
• Arial Black
• Tahoma
• Trebuchet MS
• Verdana

Reliable sans-serif typefaces include: Courier Courier New Georgia Times Times New Roman

Font Stacks:

In case you decide to use a web-safe font, make sure you go with a font stack instead of just defining a single font since there will be a fallback in case the use doesn't have that font on their system. An example of a font stack would be:

font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

In the case above, if the user does not have Helvetica Neue, the system will look for the next defined alternative.

If you are testing the website on multiple operating systems then I see no problem with using web-safe fonts. They'll significantly reduce strain on your websites resources since you don't need to store the fonts or call for Google's APIs.

Resources:

• CSS Font Stack: System compatibility of all the web-safe fonts
• Web-safe fonts - WC3 - List of web-safe fonts and best practices

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;

There is no technical downside that I can think of. System fonts are unbeatable for load time as they don't need to download.

The one design downside is a restricted choice of typefaces.

Helvetica Neue is not a system font. Helvetica is - big difference.

System Fonts

Back in the day, all we had was system fonts. Their perfectly fine if your looking for wide reaching browser compatibility, like IE < 8