Upload and manage custom fonts in SGEN
⏱ 60-second answer below · full reference ≈ 8 min · skim bold lead-ins to move faster.
In short. Custom Fonts lets you register self-hosted font files from your Media Library as named font families. Upload your.woff2(and optional.ttf/.woff) files to the Media Library first, then go to sg-admin → Custom Fonts, create a font record, attach files to weight groups, and set the status to Publish. SGEN inlines a@font-faceblock into every public page automatically — no stylesheet links to manage. The font name then appears in Appearance → Typography so you can apply it without writing CSS. For Google Fonts or other CDN-hosted fonts, use Custom Codes (<head>) instead.
On this page: What this covers · Before you start · Steps · Field reference · What success looks like · Troubleshooting · How it connects
How to add brand fonts in SGEN
What this covers
Custom Fonts is where you register self-hosted font files as named font families. Upload the files to your Media Library once, define a named bundle here, and SGEN inlines an @font-face declaration into every public page's <head> automatically. The family name then appears in Appearance → Typography pickers — no CSS required.
The feature lives at sg-admin → Custom Fonts (/sg-admin/custom_fonts) and covers the full lifecycle: create, edit, status management (Published / Draft / Trash), and restore.
Does not cover: Google Fonts or CDN-hosted fonts (use Custom Codes <head> instead), variable font axes beyond weight (SGEN treats each weight as a static file), icon fonts, or per-page font loading (emissions are global).
This feature is for fonts you own a license to self-host. It is not a Google Fonts importer — see What NOT to use this for below.
Typical uses
Adding a licensed brand typeface with multiple weights. Your design team delivers three files: BrandSans-Regular.woff2, BrandSans-Bold.woff2, and BrandSans-Italic.woff2. Upload all three to the Media Library, create a Custom Font named Brand Sans with three weight groups (400 Regular, 700 Bold, 400 Italic), and publish. The family appears in Appearance → Typography immediately.
After clicking Create a Font, SGEN saves the bundle and opens the Edit view where you can add more weight groups and confirm sources.
Staging a rebrand as Draft. Create the font records with all weight groups attached but status set to Draft. The public site keeps rendering the old fonts. On launch day, bulk-flip the new fonts to Published from the list.
The Draft row is invisible to visitors. Flip it to Published from the Edit view when the files are ready.
Adding a weight variant to an existing font. Open the existing font in Custom Fonts → Edit, click + Add Weight, select the new weight, pick the file from the Media Library picker, and click Update a Font. The new @font-face block emits on the next public page load — no other changes needed.
What SGEN emits. Once a font is Published with two weights, every public page's <head> contains:
Before you start
- Upload font files to the Media Library first. The source pickers in Custom Fonts accept only files already in your Media Library. Upload
.woff2,.woff,.ttf, or.eotfiles there and note the Media Library ID for each — you will need it when filling in source slots. - Confirm your license. Self-hosting a font without a valid web-embedding license may violate the type foundry's terms.
Where to go
Navigate to sg-admin → Custom Fonts (/sg-admin/custom_fonts).
- To create a font: click + Add New Font in the top-right corner.
- To edit an existing font: click the font name in the list.
Steps
1. Name the font family
In Font Name, enter the name you want as the CSS font-family string. This name appears in Appearance → Typography and in the public page source. Use the final production name — renaming after the font is applied in Typography requires a manual update there too. The default placeholder is My Font; replace it before saving.
2. Add a weight group
Each weight group maps one font-weight value to one set of source files. The form starts with one empty group. Click the weight selector and choose the numeric weight (400 for Regular, 700 for Bold, and so on).
For each format you have — WOFF2, WOFF, TTF, EOT — click the file-picker icon next to that slot. A Media Library picker opens filtered to font files. Select the correct file. The picker stores the Media Library ID; SGEN resolves the URL at render time. WOFF2 alone is sufficient for modern browsers. TTF provides legacy fallback.
3. Add more weight groups (optional)
To add another variant, click + Add Weight at the bottom of the weight repeater. A new group appears. Repeat step 2 for the new weight.
4. Set the status
In the right sidebar:
- Publish — the
@font-faceblock emits on every public page immediately after save. - Draft — saved but hidden from the public site and Typography pickers.
5. Save
Click Create a Font (new font) or Update a Font (existing font). SGEN saves the bundle and, for new fonts, redirects to the Edit view.
Reference
Every field on the Custom Fonts form:
| Field | Required | What it does |
|---|---|---|
| Font Name | Yes | Becomes the CSS font-family string on the public site. Must be unique. Appears in Appearance → Typography pickers. |
| Weight (per weight group) | Yes | Numeric CSS font-weight value: 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900. |
| WOFF2 source (per weight) | Recommended | Media Library ID for the .woff2 file. Works in all modern browsers. |
| WOFF source (per weight) | Optional | .woff fallback. Rarely needed if WOFF2 is present. |
| TTF source (per weight) | Optional | .ttf fallback for legacy browser support. |
| EOT source (per weight) | Optional | .eot for very old Internet Explorer. Rarely needed. |
| Status | Yes | Publish — @font-face emits on public pages. Draft — saved but hidden from public site and Typography pickers. |
What NOT to use this for
- Google Fonts — there is no URL field. To use a Google Fonts family, paste the
<link>tag into Custom Codes with placement<head>, or type the family name into Appearance → Typography and SGEN will attempt to resolve it viagooglefontsautocomplete. Custom Fonts is for self-hosted files only. - Auto-applying fonts to text — publishing a font makes the
@font-faceavailable; it does not apply anyfont-familyrule to page elements automatically. Select the family in Appearance → Typography (or Custom CSS) to render it. - File conversion — the pickers accept only files already in your Media Library. Convert TTF/OTF to WOFF2 before uploading; there is no conversion step inside SGEN.
- OpenType (OTF) files — the form has no OTF slot. Convert OTF to TTF or WOFF2 before uploading.
What success looks like
After publishing a font, open any public page and right-click → View Page Source. Near the top of <head> you will find a <style> block with your @font-face rule:
@font-face { font-family: "Brand Sans"; font-display: swap; font-weight: 400; src: url("https://your-site.com/media/uploads/2026/04/brand-sans-regular.woff2") format("woff2"), url("https://your-site.com/media/uploads/2026/04/brand-sans-regular.ttf") format("truetype");}@font-face { font-family: "Brand Sans"; font-display: swap; font-weight: 700; src: url("https://your-site.com/media/uploads/2026/04/brand-sans-bold.woff2") format("woff2");}Then go to Appearance → Typography, type your font name into the Font Family field, save, and reload the public site — the font will render.
Note: Public-site@font-faceemission is described based on how the feature works per source. The tester's session expired before front-end emission could be verified with a screenshot. If you do not see the@font-faceblock in the page source, confirm the font status is Publish (not Draft) and that the Media Library files are still present.
What to do if it does not work
- Font name not in Appearance → Typography — status must be Publish (not Draft). Draft fonts are excluded from the picker. Set status to Publish and reload the Appearance page.
- Font shows in picker but text does not change — hard-reload the public page (Shift+F5 on Windows, Cmd+Shift+R on Mac). Also confirm the Media Library source files are still present — a deleted file breaks the
@font-faceURL silently. - File not visible in the Media Library picker — the picker filters by extension (
.ttf,.woff,.woff2,.eot). Files with a different extension or renamed after upload may not appear. Re-upload with the correct extension. - Form still shows "My Font" after saving — you saved without replacing the placeholder name. Open the Edit view, update the Font Name field, and click Update a Font.
How this connects to other features
- Appearance → Typography — where Custom Fonts reach the page. After publishing, the family name appears in the Font Family autocomplete on every heading and body field. Renaming a Custom Font does not update existing Typography settings that reference the old name — update those manually.
- Media Library — Custom Fonts stores Media Library IDs, not files. Upload font files there first; delete a file that a published font references and the
@font-faceURL breaks silently. - Custom Codes — for CDN-hosted fonts (Google Fonts, Adobe Fonts, Bunny Fonts), paste the provider's
<link>or@importinto Custom Codes with placement<head>. - SG-Builder — the font-family picker in the Style Manager draws from the same list as Appearance Typography. Published Custom Fonts appear there automatically after a page refresh.
Next step
After publishing a custom font, apply it in Appearance → Typography by setting the Font Family field to the name you registered here.