Made Good Designs

How to Add Custom Fonts to Any Website

·

Editorial Team
add custom fonts to website — guide and examples

How to Add Custom Fonts to Any Website

To add custom fonts to a website you have three realistic paths: self-host the font files with @font-face, load them from a hosted service like Google Fonts or Adobe Fonts, or use your CMS or site builder’s font upload feature. Self-hosting gives you the best performance and privacy; hosted services are the fastest to set up. This guide shows exactly how each works, plus the loading and licensing details that separate a fast, legal font from a slow or infringing one.

Before you start, make sure you have the right file. The web wants WOFF2; if you only have a TTF or OTF, see our guide to font file formats for how to convert and why WOFF2 is the modern default.

Method 1: Self-Host with @font-face

This is the gold standard for performance, control, and privacy. You put the font files on your own server or CDN and declare them in CSS.

  1. Get WOFF2 files. Convert your licensed TTF/OTF to WOFF2 (and optionally WOFF for very old browsers) using the Font Squirrel Webfont Generator or the open-source woff2_compress / fontTools.
  2. Upload the files to a folder like /fonts/ on your host.
  3. Declare each weight with a @font-face rule.

A clean, modern declaration looks like this:

@font-face {
  font-family: "Brand Sans";
  src: url("/fonts/brandsans.woff2") format("woff2");
  font-weight: 400 700;   /* a range for a variable font */
  font-style: normal;
  font-display: swap;
}

body { font-family: "Brand Sans", system-ui, sans-serif; }

For a static family you write one @font-face block per weight, each with its own file and matching font-weight value. For a variable font, one block with a weight range covers the whole family.

Method 2: Use a Hosted Font Service

Services like Google Fonts, Adobe Fonts, and Fontshare handle hosting, formats, and licensing for you. You paste a <link> or <script> tag and reference the family in CSS:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Trade-offs: setup is trivial and the CDN is fast, but you add a third-party connection (a privacy and GDPR consideration in the EU, where many teams now self-host Google Fonts for compliance) and you give up fine-grained control over subsetting. For most marketing sites, hosted is perfectly fine; for performance-critical or privacy-sensitive sites, self-host.

Method 3: Upload Through Your CMS or Builder

Most platforms let you add fonts without touching code:

  • WordPress: block themes expose a Typography panel; you can also upload fonts via the Font Library (WordPress 6.5+) or a plugin like Custom Fonts, which generates the @font-face for you.
  • Shopify: the theme editor’s font picker covers system and Google fonts; custom uploads go through assets/ and a snippet using asset_url and font-face.
  • Webflow / Squarespace / Wix: all offer a “custom fonts” uploader in site settings — upload the WOFF2 and the platform wires up the CSS.

Whatever the platform, you still need a license that permits web embedding for the file you upload.

Make Custom Fonts Load Fast

Adding the font is half the job; loading it well is the other half.

  • Use font-display: swap so text renders immediately in a fallback and swaps in your font when ready — no invisible text (FOIT).
  • Preload the critical font: <link rel="preload" href="/fonts/brandsans.woff2" as="font" type="font/woff2" crossorigin> for the one or two fonts above the fold.
  • Subset to the characters and language you use to shrink files.
  • Match the fallback metrics with size-adjust and ascent-override on a fallback @font-face to reduce layout shift (CLS).
  • Serve WOFF2 only for production; WOFF as a fallback is optional. We compare them in WOFF2 vs WOFF.

Don’t Skip Licensing

A desktop license almost never includes web embedding. Self-hosting a font you only licensed for desktop, or scraping a paid font’s WOFF2 from another site, is a genuine violation that foundries do enforce. Before you deploy, confirm the EULA grants a web/embedding right, note any pageview caps, and keep your license receipt. Open-source fonts under the SIL Open Font License (most of Google Fonts) are safe to self-host and modify.

Frequently Asked Questions

What font format should I use to add fonts to a website?

Use WOFF2 — it is Brotli-compressed, about 30% smaller than WOFF, and supported by every current browser. List WOFF only as an optional fallback for very old browsers. Avoid serving raw TTF, OTF, EOT, or SVG fonts in production for performance and licensing reasons.

Is it better to self-host fonts or use Google Fonts?

Self-hosting gives the best performance, privacy, and control, and avoids third-party requests that raise GDPR concerns in the EU. Google Fonts is faster to set up and well-optimized. For privacy-sensitive or performance-critical sites, self-host; for quick projects, the hosted version is fine.

How do I stop a flash of invisible text when loading custom fonts?

Add font-display: swap to your @font-face rule so text shows immediately in a fallback font and swaps to your custom font once it loads. Preload your most important font file and use a metric-matched fallback to minimize layout shift during the swap.

Can I use any downloaded font on my website?

No. The file format does not determine usage rights — the license does. Most desktop and free-for-personal-use fonts do not permit web embedding. Confirm the EULA grants web/self-hosting rights, or use open-source fonts under the SIL Open Font License, which are safe to self-host commercially.

How do I add a variable font to a website?

Load one WOFF2 file in a single @font-face rule and declare the supported range, such as font-weight: 100 900. Then set weights with normal CSS like font-weight: 540, or use font-variation-settings for custom axes. One file then covers every weight in your design.

Keep Reading