How to pick a font from the font selector

In short. Every typography field in SGEN — Header, Footer, Mobile Menu, Styles & Layouts heading scale, per-page builder components — opens the same font picker: one dropdown with a search box, showing your Custom Fonts first, then the full Google Fonts catalog, then System fonts. Type a name fragment to filter, click to apply, then save the parent form. That's it — same control, everywhere.

On this page: What it is · Scope · Font groups · Field reference · Entry points · Steps · Troubleshooting · Limitations

How to pick a font from the font selector

What is this for?

Every place in the SGEN admin where you choose a font — the Header logo, Footer copyright line, Theme Editor heading styles, Mobile Menu links, and the Styles & Layouts typography scale — uses the same font picker. It is a single dropdown control with a search box at the top, drawing from three groups at once: system fonts (browser built-ins), Google Fonts (the full catalog), and any custom fonts you have uploaded yourself.

Learn it once, use it everywhere. The picker behaves identically on every surface. Once you know how to search, filter, and apply a font, you can move through every typography decision on the site without re-learning anything.

Scope

The font picker appears in any admin field that accepts a font family: Theme Editor Header / Footer / Mobile Menu font fields, Styles & Layouts typography fields (H1–H6, body), and any Page Builder component with a font override field. The picker draws from three groups: Custom Fonts (fonts you uploaded under Custom Fonts — shown at top), Google Fonts (the full Google catalog), and System fonts (fonts built into every browser). Selecting a Google Font that has not been used on the site before adds a new font-load request on every public page; selecting a Custom or System font adds no additional requests.

Examples

Good use cases

• Apply a custom brand face to the Header logo. After uploading a font under Custom Fonts, open Theme Editor → Header → Logo, click the font field, and find your font at the top of the list with a "Custom" tag. Click and save.
• Set the global body font in Styles & Layouts. Open Styles & Layouts, click the Body font dropdown, type a name fragment (e.g. "inter"), pick Inter, and save. Every page picks it up.
• Audition new Google Fonts for a menu. Open Theme Editor → Mobile Menu → Links, click the font field, and type a style keyword (e.g. "round") to filter Google Fonts candidates. The name of each font renders in that font — scan visually without committing.
• Audit which fonts are loaded site-wide. Some Theme Editor pickers load in in-use only mode, showing only families already referenced on the site. This gives an instant font audit in one glance. See Picker filtering modes for which screens use which mode.
• Minimize font requests for performance. Selecting a new Google Font triggers an additional load request on every page. Picking from fonts already in use (via the in-use filter) avoids the extra request.

What NOT to use this for

• Don't use the picker to upload new fonts. The picker only lets you choose from fonts that are already registered. To add a brand-new custom font (a self-hosted file you own), you go to Sidebar → Custom Fonts → Add a Font. After that font is saved, it appears at the top of every picker on the site. The picker itself has no upload button.
• Don't use the picker to delete or rename a font. The picker is a chooser. To rename a custom font, edit it under Sidebar → Custom Fonts. To remove a Google Font you no longer want anywhere, search every place you used it and switch to a different font — the picker has no "remove from site" action.
• Don't try to type a font's CSS family name directly into the picker's search. The search matches the font's display name (the family name as the platform knows it). For Google Fonts, the display name and the CSS family name are usually the same (Roboto, Inter), but the picker uses the platform's stored name — so type "Inter", not the more technical CSS string. For custom fonts, the display name is whatever you typed into the Title field when you registered the font.
• Don't expect the picker to show a typeface's full character set or weight axis up front. The picker shows family name + a one-line preview. To audition specific weights, open the Theme Editor field where you intend to apply the font, pick the family, then choose the weight from the next field down. Variable-axis sliders are not shown inside the picker itself.
• Don't use the picker to manage which Google Fonts are loaded on the public site. Loading is automatic — when a font is selected by any field, the platform loads it on the public site. To stop loading a font, you must change every field that references it. There is no "unload this font" toggle inside the picker.
• Don't depend on the picker's order being alphabetical for system fonts. System fonts appear in a small group inside the picker, but the order is determined by the platform — it isn't always strictly alphabetical. Look for the font you want by name, not by position.

Fields

The picker exposes one control: a search box + scrollable list. Each entry shows the font name rendered in that font (the family preview). Selecting a font does not save it — the save happens when you click Save on the parent form (Header / Footer / Styles & Layouts / etc.).

How this connects to other features

• Custom Fonts — every font that appears with a "Custom" tag in the picker was added under Sidebar → Custom Fonts. To add a new custom font, register it there first; it will then appear at the top of every picker on the site without any other configuration.
• Theme Editor → Header / Footer / Mobile Menu — these chrome surfaces all use the picker for their typography fields. When you change a font on the Header, only the Header re-renders with the new font; other surfaces are unaffected unless they share the same value.
• Styles & Layouts — the global typography scale (H1 through H6 plus Body) uses the picker on every field. Choosing a font in this panel sets the family for the corresponding heading style across the whole site, so every page that uses an H1 picks up the change.
• Google Fonts catalog — the picker exposes the full Google Fonts library. Every Google Font you select gets loaded automatically on the pages where it's used; you don't paste any URL or import statement.
• Picker filtering modes — some screens load the picker with the in-use filter automatically (only fonts already referenced anywhere in your site appear). Others load it with the full catalog. The Notes section below explains which mode each screen uses, so you know what to expect.

Before you start

• Know which surface you're styling. The picker is reached from many fields across the admin. If you are working on the Header logo, open Theme Editor → Header → Logo. If you are working on the H1 style, open Styles & Layouts → H1 → Font. The picker behaves the same in each, but the field you are filling is different.
• Decide whether you want a system font, a Google Font, or a custom font. If brand consistency matters, custom is usually the right answer. If you want a popular, reliable face that loads on every browser without any upload, a Google Font fits. If you want zero-load-cost (no extra request), a system font fits.
• Have any custom fonts registered first. If you intend to pick Your Store Display Serif but you haven't yet uploaded it, the picker won't show it. Register it under Sidebar → Custom Fonts before reaching the picker.
• Confirm you know the font's name. For Google Fonts, search the Google Fonts website beforehand to confirm the family name. The picker's search matches name fragments, so partial spellings work — but it's faster to know the right name.

Where to go

The font picker is reached from many places. The most common entry points:

1. Theme Editor → Header → Logo / Title / CTAs — every typography field in the Header chrome configuration.
2. Theme Editor → Footer / Mobile Menu — same, for footer text and mobile menu links.
3. Styles & Layouts → H1 / H2 / H3 / H4 / H5 / H6 / Body — the global typography scale.
4. Page Builder → Heading / Text / Button components → Font — every page's per-component font field.
5. Form Builder → Field labels / placeholder text → Font — typography on individual form fields.

The picker is the same dropdown control everywhere. It opens, shows the search box, lists the fonts, and closes when you click outside or press Escape.

Steps — Pick a custom font for the Header logo

1. Open Theme Editor and go to the Header configuration

Click Sidebar → Appearance → Theme Editor → Header → Logo. The Header logo configuration form loads with all the logo's typography fields visible.

2. Click the Font field

The picker opens. The search box is focused at the top. Below it, a scrollable list of fonts appears, with custom fonts at the top, then Google Fonts in alphabetical order, then system fonts at the bottom.

3. Locate your custom font

If you registered Your Store Display Serif earlier, it appears at the top of the list with a small Custom tag next to its name. The font name itself is rendered in Your Store Display Serif, so you can confirm it's the right face by sight.

If you can't see it, scroll up. If it's still not visible, your custom font may not have been registered — return to Sidebar → Custom Fonts and verify it's listed there. (See the What to do if it does not work section.)

4. Click the font name

The picker closes. The Font field now shows Your Store Display Serif (Custom). The page header below the field updates immediately to show your logo text rendered in the new font, so you can see how it looks before saving.

5. Click Save

The new font is saved to the Header configuration. The public site picks it up on the next page load.

Steps — Pick a Google Font for body copy

1. Open Styles & Layouts

Click Sidebar → Appearance → Styles & Layouts. The global typography scale loads — one row per heading level plus Body.

2. Click the Body font dropdown

The picker opens. Scroll past the custom fonts. The Google Fonts section starts after that.

3. Type "inter" into the search box at the top

The list filters to only fonts whose name contains "inter" — usually about 4-5 results, including Inter itself.

4. Click Inter

The picker closes. The Body font field now shows Inter (Google). The previews on the right side of the page update to show body copy rendered in Inter.

5. (Optional) Apply the same font to one or more heading levels

If you want every heading and body to use Inter, repeat steps 2-4 for each heading row in the panel.

6. Click Save

The change is committed. Every page on the public site that uses body copy now renders in Inter. The Google Font is loaded automatically on the public site — you don't have to add a stylesheet link or any imports.

Steps — Use the search box to filter a long list

1. Open any font picker

Pick the surface you're working on; the picker opens the same way on every surface.

2. Click into the search box at the top of the picker

It's already focused as soon as the picker opens, so you can start typing immediately.

3. Type a partial name

The list filters in real time as you type. Each character narrows the matches. Typing "rob" matches Roboto, Roboto Mono, Roboto Slab, Roboto Condensed.

4. Pick the match you want

Click the row, or use the keyboard arrow keys + Enter. The picker closes.

5. Clear the search to see everything again

Backspace the search box clean, or click the small ✕ icon on the right side of the search box. The full list returns.

What success looks like

A successful font pick produces:

1. The picker closes and the field you opened shows the font name.
2. The visible preview elsewhere on the page (logo, heading sample, page hero) updates immediately to render in the new font, before you've saved anything.
3. The Save button at the bottom of the form is now enabled (or its state changes from "no changes" to "unsaved changes").
4. After clicking Save, the public site picks up the change on the next page load. Visiting your live site shows the new font in place of the old one.
5. For Google Fonts and Custom Fonts, the platform automatically loads the font file on the public site — you don't add any stylesheet link or import yourself.

What to do if it does not work

My custom font isn't in the picker

• Check it's registered. Go to Sidebar → Custom Fonts. Confirm the font you expected to see is listed there with a status of Published (not Draft). Drafts are usually hidden from pickers.
• Check it has at least one weight defined. A custom font that has no weight blocks defined isn't useful and may be filtered out.
• Refresh the picker. Close the picker (click outside or press Escape), reopen it. The list reloads.
• Hard-refresh the whole page (Ctrl+Shift+R / Cmd+Shift+R). Sometimes the picker's font list is cached client-side; a fresh page request reloads it.

The picker shows fewer fonts than I expected

• Some pickers filter to only fonts in use. This is intentional. The Theme Editor sometimes loads with the in-use filter active — the picker shows only fonts already referenced somewhere on the site, plus all custom fonts. If you want the full Google Fonts catalog, look for a small "Show all" toggle near the top of the picker (when present), or open the picker from a different surface that loads with the full library.
• Try a different surface. Page Builder per-component pickers usually load with the full library. If you want to audition new fonts, open a Heading component, click its Font field, browse the full library, and copy the name back to wherever you want to use it.

The font I picked doesn't appear on the public site

• Hard-refresh the public site. A cached page may show the old font. Ctrl+Shift+R / Cmd+Shift+R reloads the page from scratch.
• Verify the font field saved. Re-open the configuration form. The font field should still show the font you picked. If it shows the old font, the save didn't go through — try saving again.
• Check that you saved the right config. The Header logo and the Footer copyright are configured on different forms. Saving the Header doesn't affect the Footer. Confirm you're checking the surface you changed.
• Check the page-builder cascade. A per-component override in a specific page can beat the global typography setting. Open the page in the Page Builder and verify no specific Heading or Text component is overriding the font you set.

The picker freezes or doesn't open

• Try clicking the Font field again. A click sometimes registers but the picker doesn't render due to a brief timing issue. A second click usually opens it.
• Reload the page. A hard reload typically fixes any stuck UI state.
• Try in a fresh browser tab. A long-running tab can accumulate stale state. A new tab is a clean slate.

My search query returns nothing

• Try a shorter, simpler partial. Typing the full name "Roboto Mono" might match nothing because of an unexpected space in the platform's stored name. Typing "robo" usually catches all variants.
• Clear the search and scroll instead. If you forgot the name, browsing the full alphabetical list is sometimes faster than guessing.

Picker filtering modes

The picker shows the right fonts for the screen you're on by switching between two modes:

1. Full library — system + Google Fonts catalog + every custom font. Used by per-page builders (Page Builder, Form Builder), the global Styles & Layouts panel, and most Theme Editor fields. This is the picker's default mode.

1. In-use only (with custom fonts always passing through) — the picker filters Google Fonts to only the families that appear somewhere in your existing site configuration, plus every custom font and every system font. Used by some Theme Editor surfaces where the goal is "tweak what's already loaded" rather than "audition something new". A field in this mode shows fewer entries — maybe 6-12 instead of 1500.

The platform decides which mode to apply automatically. Customers don't have a manual "switch modes" toggle — but knowing the modes exist helps you understand why the same picker shows a different list on a different screen.

Picker behavior — small details that help

• Each font is rendered in its own family. When you scroll the list, the name Inter is shown in Inter, Roboto in Roboto, Bebas Neue in Bebas Neue, and so on. This is a one-pass visual scan of dozens of fonts quickly.
• Custom fonts always sort first with a small Custom tag.
• System fonts sort last with a small System tag.
• Google Fonts sort alphabetically between Custom and System.
• The search box is case-insensitive and matches name fragments, not just prefixes.
• The keyboard arrows + Enter navigate the list when the search box is focused.
• Pressing Escape closes the picker without changing the field.
• Clicking outside the picker also closes it.

Example: Building a two-font brand system

A site has a custom display face (Your Store Display Serif, uploaded under Custom Fonts) and wants Inter for all body copy.

Workflow:

1. Open Theme Editor → Header → Logo. Click the font field. Your Store Display Serif appears at the top with a Custom tag. Click it, save.
2. Open Styles & Layouts. Click the H1 font field. Click Your Store Display Serif at the top, save. Repeat for H2–H4.
3. Click the Body font field. Type "inter", pick Inter, save.

Result: Two fonts applied across the whole site in ~10 minutes. No code, no font URL management.

Swapping a Google Font later follows the same pattern: open the field, type the new name, click, save. The platform automatically stops loading the old font when nothing references it anymore — no manual stylesheet updates needed.

Retiring a campaign font (e.g. Playfair Display used for H1–H2): open each heading field, switch to the replacement, save once. Open an in-use picker to confirm the retired font no longer appears.

Common mistake — wrong weight: After picking a font family, glance at the Font Weight field right next to it. The picker picks the family only; weight (300/400/600/700) is a separate field and may default to Light. If the rendered text looks thinner than expected, that field is why.

Known limitations

• The picker is read-mostly. It chooses, it doesn't upload, doesn't delete, doesn't rename. Every editing action lives in Sidebar → Custom Fonts.
• The in-use filter is determined by the platform, not by you. Some Theme Editor fields load with the in-use filter active and there's no manual switch back to the full library inside that picker. To audition fonts not currently in use, open the picker from a different surface (Page Builder per-component fields) that exposes the full library.
• No live weight preview inside the picker. The picker shows the family name in its own family. To audition weights, choose the family first, then use the Weight field below the Font field to switch between 300/400/600/700.
• No "favorites" inside the picker. Some teams want to mark 5-6 brand-approved fonts as favorites for quick access. The picker doesn't support that; if you want a brand-approved short list, register only those fonts as Custom Fonts so the picker shows a short list at the top.
• The picker doesn't show file size, character coverage, or licensing. The picker only shows the family name. To see file size or character coverage of a Custom Font, open it under Sidebar → Custom Fonts. To see Google Fonts metadata, visit the Google Fonts website directly.
• Picker order isn't reorderable. Custom fonts come first, Google Fonts in alphabetical order, system fonts last. You can't drag-and-drop the order or pin a particular Google Font to the top.

Next steps

• Read the Add a custom font doc to register a new self-hosted font that will appear in every picker.
• Read the Edit a custom font doc to update an existing custom font.
• Read the Set up the Theme Editor doc to walk through the Header, Footer, and Mobile Menu typography fields end-to-end.
• Read the Configure Styles & Layouts doc for the global heading scale that the picker fills.
• Bookmark Sidebar → Custom Fonts if you frequently add new self-hosted faces — that page is the only entry point for new font registrations.