System or desktop fonts are designed to be installed on your computer and can be used in applications available on your device, like Figma or Photoshop. System fonts usually have an .otf and .ttf extension.

The advantages of system fonts include:

• Faster loading
• No need for access to external resources to load a font
• No need to add any CSS tweaks to make fonts look right for certain browsers because they're already on most devices.^[1]

Web fonts are designed to be used in web pages with the CSS <@font-face> declaration. Web fonts go in formats like TrueType, WOFF, EOT, and SVG. They allow designers to create a richer, more custom look of a webpage, but they can affect the overall performance of page load times and require some CSS work.^[2]