If your site runs a block theme, the fonts and colors you see on the front end are not locked inside a stylesheet you have to edit. They live in the Site Editor, in a panel called Styles. You can change them from wp-admin, with the same kind of click-and-preview workflow you already use when you edit a page.
This is the calm version of that job. No FTP. No child theme. No code editor. The only thing I want you to do before you start is decide whether you are changing one block on one page, or the whole site. Those are two different panels, and mixing them up is the most common reason people think they broke something when they didn’t.
First, confirm you actually have a block theme
Go to Appearance > Themes. If you see Appearance > Editor in the left-hand menu, you are on a block theme and everything below applies. If you only see Customize, you are on a classic theme, and the Styles panel does not exist for you. WordPress documentation is explicit about this: the Site Editor is only available when you install and activate a block theme, and classic themes do not work with the Site Editor at all.
You can confirm the theme type by going to Appearance > Themes > Add New and selecting the Block Themes filter. That filtered view shows only themes with full site editing support. If your current theme is not in that list, stop here — the rest of this article will not match what you see on screen.
Two places to change fonts and colors, and when to use each
There are two distinct controls, and they do different jobs:
- Styles (Appearance > Editor > Styles) changes the whole site: body text, headings H1 through H6, links, buttons, background, and the default look of each block type everywhere it appears.
- Block Settings > Typography (inside the editor for a specific page or post) changes only the block you have selected, on that page.
If a client says “the headings are the wrong color,” that is a Styles job. If they say “this one pull-quote on the About page should be bigger,” that is a block-level job. Doing the second when you meant the first is how people end up with a site where every paragraph is a slightly different size.
Changing site-wide typography
From the dashboard, go to Appearance > Editor. In the top-right area, click the half-shaded circle icon to open the Styles panel. You will see sections for Typography, Colors, and Layout.
Click Typography. You will get a list of elements — Text, Links, Headings, Buttons, and so on. Pick the element you want to change. For headings, you can set H1 through H6 individually, or choose All to apply one setting to every heading level at once.
Inside the Typography panel for that element you can change:
- Font family — the dropdown shows a live preview of each available font.
- Font size — preset sizes labeled S, M, L, XL, XXL, or a custom value.
- Appearance — weight and italic style.
- Line height and letter spacing.
- Text decoration, orientation, and letter case.
The font list you see is defined by your theme. If the font you want is not in the dropdown, that is not a bug — it means the theme has not registered it. Adding a new font family to a block theme is a separate task that does involve theme files, and it is outside the scope of what you can do from the Styles panel alone.
A note on font size units
When you set a custom size, you will see a unit selector. The WordPress typography documentation explains the difference plainly: px is an absolute unit that stays fixed regardless of screen size or the reader’s browser settings, while em, rem, %, vw, and vh are relative units that scale with other elements or the viewport. The same documentation includes an accessibility tip recommending relative units such as rem or em instead of fixed pixels, so text and spacing scale when a reader increases their browser’s default text size.
My recommendation: use the theme’s preset sizes wherever they fit. They were chosen to work together. Reach for a custom rem value only when a preset genuinely does not fit, and avoid px for body text.
Changing site-wide colors
Still in the Styles panel, click Colors. You will see the color palette your theme ships with, plus a list of elements whose default color you can override: Background, Text, Links, Headings, and Buttons.
Two different things live here, and it helps to know which one you are touching:
- Palette — the set of named colors that appear in every color picker across the site. Editing a palette color changes it everywhere that color is used.
- Elements — the default color assigned to a specific element type, such as all links or all H2 headings.
To edit a palette color, click Palette, then the three-dot menu next to Theme or Default, then Edit colors. You can pick from the color picker or paste a HEX, RGB, or HSL value. If you have brand colors, pasting the HEX is the reliable option — the picker is fine for eyeballing, but it will not land on your exact brand value.
To change an element’s default color, click the element name under Elements. For links, you can set both the normal state and the hover state. For headings, you can set the color per level or choose All to apply one color to every heading level.
Contrast is not optional
When you pick a text color, WordPress may show a warning if the contrast against the background is too low to read comfortably. The typography documentation notes this warning and points you toward the custom color interface to choose a different color that meets accessibility guidance. Take the warning seriously. A brand color that looks great on a business card can be unreadable as body text on a white page.
Changing one block instead of the whole site
Open the page or post you want to edit. Select the block. In the Block Settings sidebar, open the Typography section. If you do not see the setting you want, click the three-dot menu inside the Typography section and add it — some options are hidden by default.
From here you can change the text color, font size, font family, weight, line height, letter spacing, and more, for that block only. The WordPress typography documentation notes that available settings differ from block to block, so a Paragraph block and a Heading block will not show an identical list.
If you want to undo everything you did to that block, open the three-dot menu in the Typography section and choose Reset All. That removes your changes and returns the block to the theme’s defaults.
Applying one block’s style to every block of that type
If you style a single block and then decide you want that look everywhere, you do not have to repeat the work. Since WordPress 6.2, the block settings include an option under the Advanced section to apply the changes you made to an individual block to all blocks of the same type across the site. The Site Editor documentation describes this directly. Use it deliberately — it is a site-wide change wearing a block-level disguise.
Style variations: the fastest legitimate shortcut
Before you hand-tune every heading and link, check whether your theme ships style variations. These were introduced in WordPress 6.0. A style variation is an alternate version of your theme with a different combination of colors, fonts, typography, spacing, and block settings already assembled. You can swap between them without changing themes.
In the Styles panel, you will see a preview of the variation your site is currently using. Click Browse styles to see the alternatives. Click one and the editor previews it immediately. If it is close to what you want, apply it and then adjust the two or three things that are off, rather than building the whole look from scratch.
WordPress 6.6 added a narrower version of this: color and typography variations, which change only colors or only typography. If your theme provides them, they appear as separate options in the Styles sidebar. For a small business site that just needs a different palette or a different heading font, this is often the entire job.
Previewing before you commit
Two tools make this safer than it sounds.
Style Book. Inside the Styles panel, the Style Book shows your theme’s blocks rendered with your current settings. It is the fastest way to see how a color or font choice affects buttons, quotes, lists, and headings all at once, without hunting through pages.
Preview. The Site Editor has a Preview option that lets you see changes before saving them. Use it. There is no reason to save a color change you have not looked at.
If something looks wrong
Here is the order of operations when a change does not land the way you expected.
The change did not appear on the front end. Check whether you actually saved. In the Site Editor, clicking Save produces a list of the templates, template parts, and synced patterns you changed, and you choose which ones to save. It is possible to make a change and leave without saving it. It is also possible to save only part of what you changed.
You changed a heading color and now a different heading is wrong too. You probably edited the palette color rather than the element color. Editing a palette entry changes every place that color is used. Go back to Colors > Palette and restore the original value, then set the element color instead.
You see a critical error email or a maintenance screen. This looks worse than it is. A fatal error in a block theme’s style settings is rare, and the fix is usually to reset the styles rather than to touch any files. In the Styles panel, the three-dot menu includes an option to reset your changes completely. The Site Editor documentation also notes that you can review style revisions from that same menu, which lets you step back to an earlier state instead of starting over.
You want to undo everything. The three-dot menu in the Styles panel has a reset option. The typography documentation describes the equivalent at the block level: the three-dot menu inside the Typography section, then Reset All. Neither of these touches your content. They only remove style changes.
You are not sure what you changed. Use the Command Palette. It opens with Cmd+K on macOS or Ctrl+K on Windows and Linux, and it is available from the admin bar while you are working in the Site Editor. It gives you a quick way to jump to styles, templates, and settings without hunting through menus.
What you cannot do from here
Two limits are worth knowing before you promise a client a specific result.
First, you cannot add a font family that the theme has not registered. The font dropdown is populated by the theme. If the exact font is not there, that is a theme-level change, not a Styles-panel change.
Second, the Styles panel does not give you arbitrary CSS. There is a Custom CSS area in the Styles interface, and it exists for cases the visual controls do not cover. But the whole point of this article is that you usually do not need it. If you find yourself reaching for Custom CSS to change a heading color, go back and check whether you missed the element-level color control — it is almost always there.
Exporting your changes before you experiment
If you are about to try a style variation or a significant palette change on a live site, export first. The Site Editor includes an Export tool under the three-dot menu next to the Styles settings. It downloads a zip of your theme with your templates, template parts, and style settings included. That gives you a copy of the current state to fall back on, without needing a staging server or a developer.
It is not a full site backup — it does not include your content, media, or plugins. But for the specific job of changing fonts and colors, it captures exactly the layer you are about to modify.
Frequently asked questions
Do I need to know CSS to do this?
No. Everything described here is done through the Styles panel and the block settings sidebar. The Custom CSS area exists if you want it, but it is not required for changing fonts, sizes, colors, or spacing.
Will changing fonts and colors affect my SEO or rankings?
Changing visual styles does not change your content, URLs, or metadata, so it does not directly affect rankings. The one indirect risk is readability: if you set body text to a low-contrast color or a very small size, readers may bounce, and that can show up in engagement metrics. The contrast warning WordPress shows exists for this reason.
Can I change fonts and colors on just one page?
Yes, at the block level. Select the block on that page and use Block Settings > Typography. That change applies only to that block on that page. Site-wide changes go through Appearance > Editor > Styles.
What if I break something?
Reset the styles. The three-dot menu in the Styles panel has a reset option, and you can also review style revisions to step back to an earlier state. Your content is not affected by style changes, so a reset returns the look without touching your pages or posts.
Why is the font I want not in the dropdown?
Because your theme has not registered it. The font list is defined by the theme, not by WordPress itself. Adding a new font family is a theme-level task.
Can I use my exact brand HEX colors?
Yes. In the color picker, you can paste a HEX, RGB, or HSL value directly. The documentation describes entering these values as the way to set a precise brand color rather than approximating it with the picker.
Sources
- WordPress Documentation, Typography Settings overview — wordpress.org/documentation/article/typography-settings-overview/
- WordPress Documentation, Site Editor — wordpress.org/documentation/article/site-editor/
- WordPress Documentation, Block themes — wordpress.org/documentation/article/block-themes/
- WordPress Documentation, Styles overview — wordpress.org/documentation/article/styles-overview/