Frequently asked questions about fonts

Upload the font files to your server, declare them in CSS with @font-face, and then use the family name in font-family. Each WebFonts font page can generate ready-to-copy CSS code.

WOFF2 is usually the best choice for modern websites because it has broad browser support and efficient compression. WOFF can be kept as a fallback for older browsers. TTF and OTF are more commonly used for desktop installation and design software.

Not always. A “free” label does not define the permitted uses. Check the specific font license: it may allow personal use, commercial work, web embedding, or require attribution. If anything is unclear, contact the author or rights holder.

Enter Ukrainian text in the preview and check the letters Ґ, Є, І, and Ї together with apostrophes and punctuation. WebFonts lets you filter fonts by language support and test your own text in the available styles.

Use WOFF2, load only the styles and character sets you need, configure long-term caching, and choose an appropriate font-display value. A critical font can be preloaded, but avoid preloading every font file.

A web font is a font file downloaded by the browser with a web page. This lets a website display the chosen typeface even when it is not installed on the user’s device.

A typeface is the shared design of a family, such as Inter. A font is a specific style in that family, such as Inter Bold Italic. In everyday language, “font” is often used for both.

A variable font stores multiple design variations in one file. Depending on its axes, you can smoothly adjust weight, width, slant, or other characteristics without loading many separate files.

They describe different font weights. Typically, 400 is Regular, 500 is Medium, 600 is Semibold, 700 is Bold, and 900 is Black. The actual appearance depends on the typeface.

Most websites need one typeface with several styles or a pair of compatible typefaces. Fewer files simplify the visual system and usually improve loading performance.

A fallback is shown while the primary font loads or when it is unavailable. Choose a system fallback with similar proportions to reduce layout shifts.

Test the font with real content in the required language, at small sizes, and on different screens. Look for clear letterforms, a comfortable x-height and spacing, sufficient contrast, and moderate line length.