How to Add a Font: A Complete Guide for Web and Desktop
Fonts shape how your content feels before a single word is read. Whether you're building a website, designing a document, or customizing a creative project, knowing how to add a font — and where it actually lives — makes a real difference in your workflow and your results.
What "Adding a Font" Actually Means
The phrase covers two distinct actions that people often conflate:
- Installing a font on your operating system — making it available to desktop apps like Word, Photoshop, or Figma
- Loading a font on a webpage — embedding or linking a typeface so browsers render it correctly for visitors
These are separate processes with different tools, file types, and considerations. Getting clear on which one you need is the first step.
How to Install a Font on Windows or macOS 🖥️
Desktop font installation is straightforward. Fonts arrive as files — typically in TTF (TrueType Font), OTF (OpenType Font), or WOFF/WOFF2 format. TTF and OTF are the standard formats for desktop use.
On Windows:
- Download the font file
- Right-click the
.ttfor.otffile - Select "Install" (for your user account) or "Install for all users" (requires admin rights)
- The font becomes available immediately in compatible apps
On macOS:
- Download the font file
- Double-click it to open Font Book
- Click Install Font
- macOS validates the file and adds it to your system font library
Both systems support bulk installation — select multiple font files and install them in one action. After installation, some older applications require a restart to detect new fonts.
On Linux, fonts are typically placed in ~/.fonts/ (user-level) or /usr/share/fonts/ (system-level), followed by running fc-cache -fv to refresh the font cache.
How to Add a Font to a Website
Web font delivery is more nuanced. A font installed on your computer is invisible to website visitors unless you explicitly load it through your CSS. There are two main approaches:
Using a Web Font Service (Google Fonts, Adobe Fonts, etc.)
Services like Google Fonts host font files on a CDN and serve them via a simple embed code. This is the most common approach for developers who want fast setup without hosting files themselves.
- Find your font on the service's website
- Copy the provided
<link>tag into your HTML<head> - Reference the font in your CSS using
font-family
Example:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> body { font-family: 'Inter', sans-serif; } The display=swap parameter tells the browser to show a fallback font while the custom font loads — a key performance consideration.
Self-Hosting with @font-face
For full control over performance, privacy, and reliability, you can host font files on your own server using the @font-face CSS rule.
@font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format('woff2'), url('/fonts/myfont.woff') format('woff'); font-weight: normal; font-style: normal; } WOFF2 is the preferred format for the web — it offers the best compression and is supported by all modern browsers. Including a WOFF fallback covers older environments.
Self-hosting gives you control over caching, removes third-party dependencies, and can improve load times when configured correctly — but it requires you to manage the files and serve them with appropriate headers.
Key Variables That Affect Which Method Makes Sense 🔧
| Factor | Desktop Install | Web Font Service | Self-Hosted |
|---|---|---|---|
| Technical skill needed | Low | Low–Medium | Medium–High |
| Works offline | ✅ Yes | ❌ No | ✅ Yes |
| Affects site visitors | ❌ No | ✅ Yes | ✅ Yes |
| File management required | Minimal | None | Yes |
| Privacy/GDPR considerations | N/A | May apply | Not applicable |
| Performance control | N/A | Limited | Full |
Licensing is a variable many people miss. Not every font you find online is free to use on a commercial website. Desktop use licenses and web use licenses are often sold separately. Before embedding a font on a public site, verify the license covers web distribution.
Font File Formats at a Glance
- TTF / OTF — Standard desktop formats; widely supported
- WOFF — Compressed web format; good browser support
- WOFF2 — Best compression; preferred for all modern web use
- EOT — Older Microsoft format; largely obsolete
- SVG fonts — Deprecated in most modern contexts
Where Things Get Complicated
Adding a font is rarely just a technical step — it sits at the intersection of design intent, performance budgets, and legal rights.
A developer building a high-traffic site will weigh font loading against Core Web Vitals, particularly Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS), since fonts that load late can cause visible text flickering or layout jumps. A designer mocking up a presentation just needs the font to show up in their tool.
Variable fonts — a newer OpenType feature — let a single font file contain multiple weights and styles, reducing HTTP requests and file size. Whether that matters depends on how many font variations your project uses.
The right approach depends on where the font is being used, who controls the environment, what performance constraints apply, and what the font license actually permits. Those details live in your project — not in any universal guide.