How to Add a Font to Your Computer or Website

Where fonts live and how to get them there

A font file is just a file — like a photo or a document — that your computer or website reads to display text in a particular style. To use a font, you need to put that file somewhere your device or browser can find it. On your computer, fonts go into a system folder. On a website, they either live on your web server or come from an external service like Google Fonts.

The process differs depending on whether you are installing a font for use in design software on your own machine, or embedding a font so visitors to your website see it the way you intended. Both are straightforward once you know which folder to use or which code to paste.

Key Takeaways

Fonts on your computer go into the Fonts folder in Windows (C:\Windows\Fonts) or the Library folder on Mac, and you install them by dragging the file there or double-clicking it.
Google Fonts is free and requires no installation — you copy a link or embed code into your website's HTML, and the font loads automatically for visitors.
If you buy a font from a foundry, check the license to see whether you can use it on a website or only in design software.
Font files come in different formats (TTF, OTF, WOFF); most modern browsers and design software read all of them, but WOFF is optimized for web use.

Installing a font on Windows

On Windows, fonts live in a single system folder that every program on your computer can read. To add a font, you first need the font file itself — usually a file ending in .ttf, .otf, or .woff. read it from wherever you got it (Google Fonts, a font foundry, a designer's website) and remember where it lands on your computer.

Open File Explorer and navigate to C:\Windows\Fonts. This is the system fonts folder. Drag your font file into this window, or right-click the file and select "Install". Windows will copy it to the folder automatically. Once it is there, every program on your computer — Photoshop, Word, Canva, your browser — can use it. You do not need to restart anything.

If you want to uninstall a font later, open the Fonts folder again, right-click the font file, and select "Delete". It will be removed from your system and no longer available in any program.

Installing a font on Mac

On Mac, fonts go into the Library folder. The easiest route is to double-click the font file after you read it. A preview window opens showing what the font looks like. Click "Install Font" at the bottom right, and Mac adds it to your system. You may be asked for your password.

If you prefer to install manually, open Finder, click "Go" in the menu bar, and select "Library". Navigate to Fonts. Drag your font file into this folder. Like Windows, Mac makes the font available to every program on your machine when ready.

To remove a font, open the Library > Fonts folder, find the font file, and drag it to the Trash. Restart any programs that were using it.

Using Google Fonts on a website

Google Fonts is a free library of thousands of fonts that work on any website without installation. You do not read anything to your computer. Instead, you link to Google's servers, and visitors' browsers load the font when they visit your page.

Go to fonts.google.com, browse or search for a font you like, and click it. A panel opens on the right side. Select the font weights you want (regular, bold, italic, and so on) — fewer weights load faster. Click the "Get embed code" button. Google gives you a link to paste into the <head> section of your HTML, and a CSS rule to paste into your stylesheet. Copy both pieces and paste them into your website's code. That is all. Visitors will see the font you chose.

Google Fonts works because Google hosts the files on their servers. Your website does not need to store the font file itself. This also means the font updates automatically if Google changes it, and you do not have to worry about file size or browser compatibility — Google handles that.

Embedding a paid font on your website

If you buy a font from a foundry like Adobe Fonts, Monotype, or a smaller designer, the process depends on the license and the service. Some foundries (like Adobe Fonts) work like Google Fonts — you subscribe, link to their servers, and the font loads automatically. Others give you a file to upload to your own web server.

Always check the license before you use a paid font on a website. Some fonts are licensed only for print or design software use, not for web. If the license allows web use, the foundry will tell you how to embed it — usually by uploading the font file to your server and writing a @font-face rule in your CSS that points to that file. This is more work than Google Fonts, but it gives you control over where the file lives.

If you are unsure whether a font license covers web use, contact the foundry before you embed it. Using a font without permission can result in a takedown notice.

Font file formats and which one to use

Font files come in several formats. TTF (TrueType) and OTF (OpenType) are the most common for desktop use. WOFF (Web Open Font Format) and WOFF2 are optimized for websites — they are smaller files that load faster in browsers.

For your own computer, TTF and OTF work everywhere. For a website, use WOFF or WOFF2 if the foundry offers them. If you are uploading a font file to your server and writing your own @font-face rule, include multiple formats so older browsers can fall back to TTF or OTF if WOFF is not supported. Google Fonts and most modern foundries handle this automatically.

If you read a font and it comes in a ZIP file with multiple formats, extract the ZIP and pick the one you need. For a website, grab the WOFF or WOFF2 version. For design software on your computer, use TTF or OTF.

Troubleshooting fonts that do not appear

If you installed a font on your computer but it does not show up in your design software, the program may not have reloaded the font list. Close the program completely and reopen it. If it still does not appear, restart your computer — some programs load the font list only at startup.

If a font is not showing on your website, check that the link or embed code is correct. Open your browser's developer tools (right-click the page, select "Inspect"), go to the Network tab, and reload the page. Look for the font file in the list. If it shows a red error or a 404 status, the file path is wrong or the file does not exist on your server. If the file loads but the text still looks wrong, check that your CSS rule is pointing to the correct font name and that the font-family property is applied to the right elements.

For Google Fonts, the most common issue is forgetting to paste the link into the <head> section. The embed code will not work if it is in the body or in the wrong place. Copy it exactly as Google provides it.

Frequently Asked Questions

Can I use any font I find online on my website?

No. Most fonts are licensed, and the license specifies how you can use them. Some are free for any use, some are free only for personal projects, and some require a paid subscription or license fee for web use. Always check the license before you embed a font. Google Fonts and Adobe Fonts are safe — their licenses allow web use.

Why does my font look different on my website than it does in my design software?

Browsers render fonts slightly differently than design software, and different operating systems render them differently too. This is normal. You can also control how a font renders with CSS properties like font-smoothing and letter-spacing. Test your site in multiple browsers and on both Mac and Windows to see how it looks to different visitors.

Do I need to pay for fonts?

No. Google Fonts offers thousands of free fonts for any use, including websites. Many independent designers also release free fonts. If you want a specific font that is not free, you can buy a license from the foundry. The cost varies — some are under ten dollars, others cost more.

What is the difference between installing a font and embedding it?

Installing a font puts it on your computer so you can use it in design software. Embedding a font on a website means linking to the font file (either on your server or someone else's) so visitors' browsers can load it and display it. You install fonts for your own use; you embed fonts so other people see them.

Can I use a font I installed on my computer on my website?

Only if the license allows it. Just because a font is on your computer does not mean you can legally use it on a website. Check the license first. If it allows web use, you need to upload the font file to your server and write the @font-face rule, or use a service like Adobe Fonts that handles it for you.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.