Hello @regina23d,
I've tried to answer your question to the best of my knowledge below:
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 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 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:
Reliable sans-serif typefaces include: Courier Courier New Georgia Times Times New Roman
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.