Custom Fonts

Custom Fonts adds your own typefaces to every font-family dropdown in the builder. You
can host the font files on your own server, or point Oxygen at a stylesheet from a
service like Adobe Fonts. Open the builder, click the Oxygen logo in the top-left
corner, choose Preferences, then the Custom Fonts tab.

Fonts are stored site-wide, so a font you add is available to everyone who edits the
site. Changes here aren't live until you click Save Fonts.

Managing custom fonts requires a licensed copy of Oxygen.

Add a font you host yourself

1. Click Add Font, type the family name — this is the name you'll see in font
   dropdowns — and click Add.
2. Drag your .woff / .woff2 files onto the drop zone, or click browse… to pick
   them. You can add several at once.
3. Each file becomes a font face. Set its Font Weight and choose Normal or
   Italic, so Oxygen knows which file to use when you ask for bold or italic text.
4. Click Save Fonts.

Oxygen writes the uploaded files to wp-content/uploads/oxygen/fonts/ and generates a
stylesheet next to them with one @font-face rule per face, each with
font-display: swap so text stays visible while the font loads. Spaces and hyphens in
your filenames become underscores on the way in, so Lora-Regular.woff2 is stored as
Lora_Regular.woff2.

You don't have to upload anything. A family added with no files at all still appears in
the dropdowns, which is what you want for a font your visitors already have — a system
font stack, or a font loaded by your host or another plugin.

Variable fonts

A variable font is one file that covers a range of weights and widths instead of one
fixed combination. Click Add Variable Font instead of Add Font, name it, and
upload the file.

The face then asks for the range rather than a single weight: Min Weight and Max
Weight (1–1000), and optionally Min Width and Max Width as percentages
(1–200). Fill in what the font actually supports — the type designer's specimen page
will tell you. The family is labelled Variable in the list so you can tell the two
kinds apart.

Fonts from an external stylesheet

For a hosted font service — Adobe Fonts and the like — you don't upload anything.
Click Add CSS URL (or Add External CSS the first time), paste the URL of the
stylesheet that contains the @font-face definitions, and click Add.

Oxygen loads that stylesheet and registers the families it defines, so they appear in
the dropdowns like any other font. A family that came in this way shows "Sourced
from …" with its URL when you expand it, and has no file list of its own — the
provider controls the files.

Fallbacks

Expand any family and you'll find a CSS Fallback String field. Whatever you put
there is appended to the family name in the CSS Oxygen renders — set it to
Georgia, serif and every rule using this font comes out as
font-family: Lora, Georgia, serif. It's what the browser uses while your font is
loading or if it fails to load. Separate multiple families with commas.

Fallback changes need a page refresh on top of saving before you see them in the
builder — Oxygen tells you so when you edit the field.

Removing a font

The trash icon on a family's title bar removes the whole family; the trash icon on a
face removes just that face. Neither takes effect until you click Save Fonts.

There's no rename control — a family's name is fixed once it's added. To change it, add
a new family under the new name and re-point whatever was using the old one.

When your font actually loads

Adding a font doesn't add anything to your pages. Oxygen enqueues a font's stylesheet
only on pages that actually use it, so an unused family costs your visitors nothing.
That's also why a newly added font shows up in the builder's dropdowns immediately but
doesn't appear in your front-end page source until something is styled with it.