What are web fonts and how do you use @font-face?

Web fonts allow you to use custom typefaces beyond the limited set of system fonts. The @font-face rule declares a font family by specifying a name and the URL of the font file: @font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'); }. The woff2 format offers the best compression and is supported in all modern browsers. Services like Google Fonts host fonts and provide a <link> tag you paste into your HTML. Performance considerations: use font-display: swap to show a fallback font while loading, apply font-display: optional for less critical fonts, and self-host fonts to reduce DNS lookups.