System vs web fonts

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 .otf and .ttf extensions, which are simply file formats that describe how the font looks and behaves.

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, on the other hand, are loaded from the web and used in websites. They are applied through a simple CSS rule called @font-face. Web fonts often come in formats like WOFF, EOT, or SVG, which are designed to work well in browsers.

Web fonts allow designers to create a richer, more custom look for a webpage, but they can slow down loading times and require some CSS setup.^[2]