Accessing Global Styles

 

To begin customizing global styles, follow these steps:

1. Log in to your platform’s admin dashboard.
2. Navigate to Appearance in the left-hand menu
3. Click on Editor to open the editing interface.
4. In the editor, locate and click on the Styles section. Then click on the Pencil Icon. This will display all available global style options.

Managing Fonts

Within Typography → Fonts, you can install and select font families and their variants.

Library Tab

1. Displays fonts that come bundled with your theme or are provided by the WordPress installation.
2. For example, you might see “Plus Jakarta” and “Work Sans,” as shown in your screenshots.

Choosing Font Variants

1. Click the font family name (e.g., “Plus Jakarta”) to view its available variants (e.g., Semi‐bold, Bold).
2. Select the checkboxes for the variants you’d like to use on your site.

Performance Note: The more variants you enable, the larger your font files will be. This can potentially slow down your site. Choose only the variants you need.

Upload / Install Fonts 

You can see additional tabs to Upload or Install Fonts(Google Fonts).

If your site or theme allows it, you can upload custom fonts from your computer or install them from a third‐party source(Google Fonts). You can also

Update Button

1. After selecting variants or adding new fonts, click Update to save these global font settings.

Typography for Specific Elements

Under Typography → Elements, you can set different typography rules for the following content areas. Each element has the same type of controls, though the default settings may differ.

Text

Access Text Settings From the Typography panel, click Text.

1. Font: A dropdown allows you to select which font (family) you want for all body text, e.g. “Work Sans.”
2. Size (PX): Here you can select a predefined size token (e.g., P1 = 18px) or set a custom size.
3. Appearance: Controls weight/variant (e.g., “Regular,” “Light,” “Bold,” etc.).
4. Line Height: Set the spacing between lines of text (e.g. 1.3).
5. Letter Spacing: Adjust spacing between individual letters, measured in px.
6. Letter Case: Control text transformation (none, uppercase, lowercase, capitalize).

Click the three‐dot menu (top‐right in this panel) for additional advanced settings if your theme supports them.

Links

Access Link Settings From the Typography panel, click Links.

1. Font / Size: By default, these might be set to “Default,” meaning they inherit the global or body text setting.
2. Appearance: Choose the font weight or style for link text.
3. Line Height: Adjust how spaced out lines are for links when they wrap.
4. Decoration: Control whether links are underlined, overlined, or have no text decoration.

Headings

Access Heading Settings. From the Typography panel, click Headings.

1. Heading Levels: Along the top, you’ll see options for All or H1, H2, H3, H4, H5, H6. “All” applies shared settings to every heading level. You can then override these on a per‐level basis if desired.
2. Font: Choose a font family (e.g., “Plus Jakarta”).
3. Appearance: Typically set to a bolder weight (e.g., “Bold”) since headings stand out.
4. Line Height: The default might be 1.5, but you can increase or decrease for stylistic preference.
5. Letter Spacing: If you want headings to appear more spaced out, set a value here.
6. Letter Case: Control uppercase, lowercase, or capitalized headings.

Captions

Access Caption Settings. From the Typography panel, click Captions.

1. Font / Size / Appearance: By default, these are set to “Default,” meaning they follow the global text style.
2. Adjust if you want photo/video captions to look distinct from body text.

Buttons

Access Button Settings. From the Typography panel, click Buttons.

1. Font: Often left at “Default” to inherit from the body text, but you can select a specific font (e.g., “Plus Jakarta”) for a unique button style.
2. Size: Commonly set to a slightly larger preset (e.g., “P2 16px”).
3. Appearance / Line Height / Letter Spacing / Letter Case: Fine‐tune button text to ensure it’s legible and styled for your design (e.g., uppercase and bold to stand out).

Font Size Presets

This feature is a powerful tool for maintaining design consistency across your site while keeping full control over how your text looks. If you need more advanced customization, consult your theme’s documentation or explore additional typography plugins that integrate with the Site Editor. 

Under Typography → Font size presets, you can manage theme‐wide sizing tokens. These presets often control the values for headings and paragraph text sizes.

Theme Presets

You will see headings (H1–H6) listed with associated sizes (72px, 62px, 48px, 42px, 32px, 24px) and paragraph sizes (P1, P2, P3, etc.).

Editing a Preset

1. Click on a preset (for example, Heading 4 → 42px).
2. Change the numeric value to a new size (e.g., 38px).
3. Click Done or Update (depending on your theme’s interface) to save changes.

Custom Presets

You can click the + (plus icon) under Custom to add a new font‐size label (e.g., “Subtitle”) and assign it a value.

This new preset can then be used in blocks or anywhere in the global styles panel.