Upload and manage custom fonts for your site
How to add brand fonts in SGEN
The Custom Fonts area is where you register font files you have already uploaded to your Media Library and make them available as named font families across your site. Once a font is published, SGEN inlines an @font-face declaration into every public page's <head> — no stylesheet links to maintain, no external CDN dependency. The font name then appears in the Appearance typography pickers so you can apply it to headings, body text, and other type settings without writing any CSS.
What is this for?
Custom Fonts solves the problem of licensed or custom typefaces that are not available as Google Fonts. You upload the font files (TTF, WOFF, WOFF2, or EOT) to your Media Library once, then define a named font bundle here. Multiple weight variants — Regular, Bold, Italic, and so on — are grouped under a single family name. SGEN handles the @font-face plumbing; you just pick the family name in Appearance.
This feature is for fonts you own a license to host. It is not a Google Fonts importer — for Google Fonts, see the "What NOT to use this for" section below.
Good use cases
Example 1: Adding a licensed brand typeface with multiple weights. Your design team delivers a brand font in three files: BrandSans-Regular.woff2, BrandSans-Bold.woff2, and BrandSans-Italic.woff2. You upload all three to the Media Library, then create a Custom Font named Brand Sans with three weight groups (400 Regular, 700 Bold, 400 Italic). After you publish the font, every page on your site loads the Brand Sans family and it appears in Appearance → Typography so you can set it as the body typeface.
Font Manage
After clicking Create a Font, SGEN saves the bundle and opens the Edit view where you can add more weight groups and confirm sources.
Example 2: Drafting a font bundle while waiting for the final files. A designer is still converting a typeface and will deliver WOFF2 files next week. You create the font record now with Status set to Draft, enter the family name, and save. The font is invisible on the public site until you switch it to Published. When the files arrive, you attach them to the weight groups and publish in one step.
Custom Fonts
| Name | Status | Author | Date | |
|---|---|---|---|---|
| Brand Sans Edit · Trash | Published | Sarah K. | Apr 23, 2026 | |
| Heading Serif Edit · Trash | Published | Sarah K. | Apr 20, 2026 | |
| Campaign Display Edit · Trash | Draft | James C. | Apr 19, 2026 | |
| Promo Script Edit · Trash | Draft | James C. | Mar 14, 2026 |
The Draft row is invisible to visitors. Flip it to Published from the Edit view when the files are ready.
Example 3: Editing an existing font to add a new weight variant. Six months after launch, the design team adds a Light (300) weight to the brand typeface. You open the existing Brand Sans font in Custom Fonts → Edit, click Add Weight in the repeater, select weight 300, pick the BrandSans-Light.woff2 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.
Font Manage
What NOT to use this for
- Google Fonts — Custom Fonts is not a Google Fonts importer. 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 directly into the Appearance → Typography font field and SGEN will attempt to resolve it viagooglefontsautocomplete. Custom Fonts is for self-hosted files only. - Site-wide CSS font rules — registering a font here does not apply it to any text automatically. Publishing a font makes the
@font-faceavailable; you must then set the family in Appearance → Typography (or write a Custom CSS rule targeting a specific element). Custom Fonts does not write anyfont-familyCSS onto page elements. - Bulk file conversion — the WOFF2 file picker accepts only a file that is already in your Media Library. Convert TTF/OTF files to WOFF2 format 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.
How this connects to other features
- Appearance → Typography — this is where Custom Fonts actually reach the page. After you publish a font, its name appears in the Font Family autocomplete on every Typography heading and body field. The font only renders on the site if you have selected it there (or via Custom CSS). Renaming a Custom Font here does not update any Typography settings that already reference the old name — update those manually after a rename.
- Media Library — Custom Fonts does not store font files itself. Every source slot stores the Media Library ID of a font file you have already uploaded. Upload font files to the Media Library first, then return here to attach them. Deleting a Media Library file that a published font references will break the
@font-faceURL on the public site silently. - Custom Codes — for fonts that are served from an external CDN (Google Fonts, Adobe Fonts, Bunny Fonts), paste the provider's
<link>or@importsnippet into Custom Codes with placement<head>. Do not use Custom Fonts for those — it is for self-hosted files in your Media Library. - SG-Builder — when building pages, the font-family picker in the SG-Builder Style Manager draws from the same list as Appearance Typography. Published Custom Fonts appear there automatically once the page is refreshed.
Before you start
- Upload your font files (
.woff2,.woff,.ttf, or.eot) to the Media Library before creating the font record. Note down the Media Library ID for each file — you will need it in the source picker. - Confirm you hold a web-embedding license for the font. Self-hosting a font without a valid license may violate the type foundry's terms.
Where to go
- Log in to SGEN and 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 the Font Name field, enter the name you want to use as the CSS font-family string. This is what will appear in Appearance → Typography and on the public page source. Use the final production name — renaming after you have applied the font 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 weight group. Click the weight selector and choose the numeric weight (400 for Regular, 700 for Bold, and so on).
For each source 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, not a URL; SGEN resolves the URL at render time.
You only need to fill the formats you have. WOFF2 alone is sufficient for modern browsers. TTF provides legacy fallback.
3. Add more weight groups (optional)
To add a second variant (for example, 700 Bold), 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-faceCSS emits on every public page immediately after save. - Draft — the font is saved but hidden from the public site. Use this when the files are not yet ready.
5. Save
Click Create a Font (on a new font) or Update a Font (on an existing font). SGEN saves the bundle and, for new fonts, redirects to the Edit view showing the assigned ID in the URL.
The complete flow
Font Manage
What success looks like
After publishing a font, open any page on your public site and right-click → View Page Source. Near the top of the <head> section you will find a <style> block containing an @font-face rule for your family. It will look similar to:
@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");
}After confirming the @font-face is present, go to Appearance → Typography, find the heading or body setting you want to change, type Brand Sans into the Font Family field, and save. Reload your public homepage — the headings should now render in your brand font.
Note: The public-site@font-faceemission was described above based on how the feature works according to the source code. The tester's session expired before the front-end emission could be directly verified with a screenshot. If you do not see the@font-faceblock in the page source after publishing, confirm the font status is set to Publish (not Draft) and check that the Media Library files are still present.
What to do if it does not work
- The font name does not appear in Appearance → Typography — confirm the font's status is Publish (not Draft). Draft fonts are excluded from the font picker. Save with status Publish and reload the Appearance page.
- The font picker shows the name but text does not change on the public site — the
@font-faceblock is in the page source but the browser may be caching the old version. Hard-reload the public page with Shift+F5 (Windows) or Cmd+Shift+R (Mac). Also confirm the Media Library files are still present — a deleted source file breaks the URL. - The font file was uploaded but does not appear in the Media Library picker — the picker filters by extension (
.ttf,.woff,.woff2,.eot). Files uploaded under a different extension or renamed after upload may not appear. Re-upload with the correct extension. - The form shows "My Font" as the font name after saving — you saved without changing the default name. Open the Edit view, update the name field, and click Update a Font.
Next step
After publishing a custom font, apply it in Appearance → Typography by setting the Font Family field to the name you registered here.