How to Add a Font: A Complete Guide for Web and Desktop Use

Adding a font sounds simple — until you realize the method changes completely depending on whether you're working on a website, a design app, a word processor, or an operating system. The process isn't complicated, but the right approach depends on where you need the font and what you're building.

What "Adding a Font" Actually Means

Adding a font can refer to two very different things:

Installing a font on your operating system — so it's available across all apps on your device
Loading a font into a web project — so browsers render it correctly for visitors

Both are straightforward once you know which you're doing. Confusing the two is where most people get stuck.

How to Install a Font on Windows or macOS 🖥️

Installing a font system-wide makes it available in Word, Photoshop, Figma, and any other app that reads from your OS font library.

On Windows

Download the font file — usually a .ttf (TrueType Font) or .otf (OpenType Font) file
Right-click the file
Select "Install" to install for your user account, or "Install for all users" if you have admin access

The font becomes available immediately in most applications without restarting.

On macOS

Download the .ttf or .otf file
Double-click the file — Font Book opens automatically
Click "Install Font"

Alternatively, drag the file directly into the Font Book app. macOS also supports variable fonts, which store multiple weights in a single file — useful for design work where file size matters.

On Linux

Copy the font file to ~/.fonts/ for a single user, or /usr/share/fonts/ for system-wide access, then run fc-cache -f -v in the terminal to refresh the font cache.

How to Add a Font to a Website

Web fonts work differently from system fonts. Visitors to your site don't have your fonts installed, so the font data has to be delivered through your code. There are two main methods.

Method 1: Google Fonts (or Another Font CDN)

Google Fonts is the most common approach for web projects. It's free, fast, and requires no font files on your server.

Go to fonts.google.com and select a font
Choose the weights you need (300, 400, 700, etc.)
Copy the <link> tag Google provides and paste it into the <head> of your HTML:

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

Reference the font in your CSS:

body { font-family: 'Inter', sans-serif; }

The browser fetches the font from Google's servers when the page loads. This means no self-hosting required, but it does introduce an external dependency and a small latency cost on the first load.

Method 2: Self-Hosting with @font-face

If you own a font license, need offline support, or want full control over performance, self-hosting is the alternative.

Place your font files (.woff2 is the modern standard; .woff as a fallback) in your project directory
Declare them in your CSS using @font-face:

@font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format('woff2'), url('/fonts/myfont.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }

Use the font name in your styles as normal

The font-display: swap property is worth understanding — it tells the browser to show fallback text immediately while the custom font loads, preventing a flash of invisible text (FOIT).

How to Add Fonts in Design and Office Applications

Application	Method
Microsoft Word	Install font to OS; it appears in the font list automatically
Adobe Photoshop	Install to OS; use the Adobe Fonts library inside the app
Figma	Install to OS; Figma reads system fonts, or use Google Fonts plugin
Canva	Upload via the Brand Kit section (paid plans)
Google Docs	Use the More Fonts option in the font dropdown

Most design tools read from your OS font library, so a system installation is usually enough. Cloud-based tools like Canva or Google Docs have their own font libraries and upload workflows independent of your local system.

Key Variables That Affect Your Approach 🔑

The right method depends on several factors that vary by user:

Where the font is needed — system-wide, one app, or a website
Font format — .ttf, .otf, .woff2, and variable fonts each have different compatibility ranges
Licensing — some fonts are free for web use, some require a commercial license, some restrict embedding
Performance requirements — self-hosted fonts can be optimized more precisely than CDN-delivered fonts
Technical environment — a CMS like WordPress handles font loading differently than a hand-coded HTML project
Team or multi-device needs — a font installed on one machine won't automatically appear on a colleague's

Font Formats: What the File Extensions Mean

Format	Best Use
`.ttf` / `.otf`	Desktop/OS installation
`.woff`	Web use, broad browser support
`.woff2`	Web use, better compression, modern browsers
Variable font	Single file, multiple weights — web and desktop

WOFF2 is the recommended format for web projects today. It offers significantly smaller file sizes than TTF with near-universal browser support. If you're downloading fonts specifically for a website, look for WOFF2 versions first.

When System Fonts Are the Better Choice

Custom fonts add personality but they also add weight. For performance-sensitive projects, system font stacks — fonts already installed on the user's device — load instantly with zero network cost.

A common system font stack looks like:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

This renders native-looking text on every major platform without loading a single external file. Whether that trade-off makes sense depends entirely on your project's design requirements and performance targets.

The actual steps to add a font are quick once you know the environment — but the right combination of method, format, and source depends on what you're building, who will see it, and what constraints (licensing, performance, tooling) apply to your specific setup.