System fonts are fonts already installed on your computer (like Helvetica or Arial) and are usually used by an operating system to display text used in menus, icons, etc.
1. Go to Customize > Webfonts
2. Click 'Add Webfont'
3. Carefully fill in the information for your system font. If you enter a small detail incorrectly, your fonts may not show up correctly. Enter the font information as follows:
Display Name: This is what will display in the Content Editor, so give it a name that helps you recognize which font and weight it is.
System Name: This is the actual font name, so this will need to be the same font name as the font file. The font name will be how it displays in programs like Photoshop and Word.
Font Weight: Choose which weight coincides with the font you want to use.
This font weight guide that may be helpful (but not all fonts will have all of these weights):
Font Weight Usage: When using system fonts, this should always be set to 'Via CSS.'
Category: Choose between Sans-Serif and Serif.
Font Style: Choose between Normal and Italic
Here is an example of the completed information for Helvetica Bold:
4. Now click Add Webfont, then click Save.
You did it! Now when you go back to the Content Editor and add or edit a font, you will see your new font in the dropdown.