> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wpbevel.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Fonts

> Upload a brand's font files once and pick the family in every typography control, served from your site.

**Bevel → Custom Elements → Custom Fonts** installs font families on the site. Each family appears under **Custom Fonts** at the top of every Elementor typography control, and the files are served from your own server, with no request to Google.

## Adding a family

1. Click **New font family** and name it (Satoshi, Inter Display, your brand's face).
2. Drop the files into the family. One file per weight and style: `Satoshi-Bold.woff2`, `Satoshi-BoldItalic.woff2`, and so on.
3. Choose a fallback (sans-serif, serif, monospace, cursive, system UI) and check the live preview.

Accepted formats: **WOFF2, WOFF, TTF, OTF**. Files are checked by their contents, not their names: a renamed file, or one that is not really a font, is refused.

The weight and style are read from the file name (`Bold`, `700`, `SemiBold`, `Italic` and the rest) and can be corrected per face afterwards.

## Using it

Pick the family in any typography control, in Site Settings global fonts, or by name through [Bevel MCP](/mcp/overview), which lists the installed families and the weights that ship with them. Files live under `wp-content/uploads/bevel/fonts/`.

An assistant connected through Bevel MCP can install fonts too, from a link or through an upload page you drop the files onto; the family lands here. See [Uploads](/mcp/uploads).

## Google fonts

Elementor's Google Fonts list is frozen at a release; the Kit back-fills families Google published since, so a newer family is available by name. The **Google Fonts Load** and **Load Google Fonts Locally** settings under [Tools → Optimization](/kit/tools#manual-settings) control how Google fonts are served.

## Preloading

**Site Settings → Settings → Preload Fonts** lists the site's custom fonts and the Google fonts stored locally, and preloads the ones you tick. Pick only the families used above the fold. See [Extras](/kit/extras#font-preloading).