How to Add Fonts: A Complete Guide for Web and Design Projects
Fonts shape how content feels before a single word is read. Whether you're building a website, designing a document, or customizing an app interface, knowing how to add fonts — and which method fits your context — is a foundational skill in web development and design.
What "Adding a Font" Actually Means
Adding a font means making a typeface available to a system, application, or webpage so it renders correctly for users or on your machine. The process differs significantly depending on where you're adding it:
- To your operating system — so desktop apps like Word, Photoshop, or Figma can use it
- To a website or web app — so browsers load and display it for visitors
- To a design tool — some apps manage fonts independently of the OS
Each context has its own method, and mixing them up is the most common source of confusion.
Adding Fonts to Your Operating System
Windows
- Download the font file — typically in .ttf (TrueType Font) or .otf (OpenType Font) format
- Right-click the file
- Select "Install" (installs for your user account) or "Install for all users" (requires admin rights)
The font becomes available immediately in most applications without restarting.
macOS
- Download the font file (.ttf, .otf, or .ttc)
- Double-click the file — Font Book opens automatically
- Click "Install Font"
Alternatively, drag the font file directly into the Fonts folder inside your system's Library directory.
Linux
Copy font files into ~/.fonts (user-level) or /usr/share/fonts (system-wide), then run fc-cache -f -v in the terminal to refresh the font cache.
Adding Fonts to a Website 🌐
This is where web development intersects with design, and there are two main approaches.
Method 1: Web Font Services (Google Fonts, Adobe Fonts, etc.)
Web font services host fonts on their own servers and let you load them via a link or import statement. No file downloads required.
Using Google Fonts (example):
- Go to fonts.google.com, choose a font, and click "Get font"
- Copy the generated
<link>tag - Paste it into the
<head>of your HTML file - Reference the font in your CSS:
body { font-family: 'Inter', sans-serif; } This method is fast to implement and the font files are served from a CDN, which handles caching and delivery efficiently.
Method 2: Self-Hosting Fonts
You download the font files and serve them from your own server. This gives you full control over loading behavior and avoids third-party dependencies.
@font-face { font-family: 'MyFont'; src: url('/fonts/myfont.woff2') format('woff2'), url('/fonts/myfont.woff') format('woff'); font-weight: normal; font-style: normal; } Key web font formats:
| Format | Browser Support | File Size | Use Case |
|---|---|---|---|
| WOFF2 | Modern browsers | Smallest | Primary format |
| WOFF | Broad support | Small | Fallback |
| TTF/OTF | Most browsers | Larger | Legacy or desktop |
| EOT | IE only | Varies | Rarely needed today |
WOFF2 is the standard choice for web delivery. Most font libraries provide it alongside WOFF as a fallback.
Adding Fonts Inside Design Tools
Figma
Figma uses fonts installed on your operating system when using the desktop app. The browser version requires the Figma Font Helper plugin installed locally. Once your OS fonts are installed, they appear in Figma's font picker automatically.
Figma also has a Plugin ecosystem — tools like Font Fascia or Fontara let you browse and apply Google Fonts directly within the app without OS installation.
Adobe Creative Cloud
Adobe fonts are managed through Adobe Fonts (formerly Typekit), included with Creative Cloud subscriptions. You activate fonts directly in the Creative Cloud desktop app, and they sync across Illustrator, InDesign, Photoshop, and other Adobe tools without manual file installation.
Canva, Webflow, and Similar Platforms
These platforms manage fonts within their own environments. Canva has a built-in font library and allows uploading custom fonts on paid plans. Webflow integrates with Google Fonts natively and also supports custom font uploads through its asset manager.
Variables That Affect Your Approach
The "right" method depends on several factors that vary by user:
- Platform: A website needs web fonts; a desktop document needs OS-level installation
- Font licensing: Some fonts are free for web use, others require a commercial license, and some prohibit self-hosting entirely — always check the license before deploying
- Performance needs: Self-hosted fonts give you control over loading strategy (preloading,
font-displaysettings); third-party services trade control for convenience - Technical skill level: CSS
@font-facerequires comfort with code; Google Fonts embed links are beginner-friendly - Privacy considerations: Using a third-party font service means user requests are logged by that service — relevant for GDPR-compliant sites
- Design tool ecosystem: Your specific tools may have built-in font management that bypasses OS installation entirely
Font Formats and Compatibility 🔤
Not all font files work in all contexts. .TTF and .OTF work across operating systems and most design tools. .WOFF2 is optimized for web browsers and won't install meaningfully at the OS level. Variable fonts — a newer format — contain multiple weights and styles in a single file, reducing HTTP requests on the web but requiring browser and tool support to use effectively.
What "Loading" a Font Actually Involves on the Web
When a browser encounters a custom font in CSS, it fetches the font file, decodes it, and applies it to text. If the file hasn't loaded yet, the browser either shows invisible text (FOIT — Flash of Invisible Text) or shows a fallback font temporarily (FOUT — Flash of Unstyled Text). The CSS font-display property controls this behavior, with options like swap, block, and optional producing meaningfully different results for performance and user experience.
The method that works best — and the tradeoffs you're willing to accept — comes down to your specific project, audience, and infrastructure.