Devices and HardwareGamingSecurity and PrivacyContact UsAbout Us

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

  1. Download the font file — usually a .ttf (TrueType Font) or .otf (OpenType Font) file
  2. Right-click the file
  3. 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

  1. Download the .ttf or .otf file
  2. Double-click the file — Font Book opens automatically
  3. 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.

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