Lovable Fonts in WordPress: Keep Your Design Tokens

Where fonts and colors live in each system

A Lovable app is React and TypeScript styled with Tailwind CSS and shadcn/ui. Colors are usually CSS custom properties in a global stylesheet, mapped into Tailwind as names like primary, muted or accent. Fonts come from a Google Fonts link or import, then get attached to a Tailwind family such as font-sans or font-display.

WordPress block themes do the same job with a single JSON file. theme.json sits at the root of the theme. It declares a color palette, a font size scale, font families and the files behind them, plus defaults for spacing and layout width.

The practical difference: in Lovable a token is only real when a class uses it. In WordPress a token in theme.json becomes a choice in the editor UI. Every palette color appears in the color picker. Every font size appears in the size dropdown. Editors pick from your design instead of typing hex values.

What the converter writes into theme.json

When you convert a project at iqdesk.com/app, we read the source before generating any block markup. The Tailwind type scale and colors become theme.json entries. Google Fonts used by the project are copied into the theme and registered as font families, so the site does not depend on an external request at render time.

The result is a block theme whose Styles panel already matches the original. Headings use the display family you chose. Buttons use your primary color. Body text uses the base size from your Tailwind scale.

We also copy images into the theme and set the site logo, so the brand side of the design arrives together with the type and color tokens. The full list of what travels and what does not is on supported features.

• Palette — Tailwind color tokens become named palette entries, available in every color picker.
• Type scale — Tailwind font sizes become WordPress font size presets with readable names.
• Font families — the Google Fonts your project loads are registered as families in theme.json.
• Logo and images — copied into the theme folder and wired to the site logo setting.
• Per-page meta — on newer TanStack Start apps, titles and descriptions from each route head() are written to Yoast, Rank Math or SEOPress.

Checking the fonts after you install the theme

Install the theme the normal way: Appearance → Themes → Add New → Upload Theme → Activate. Pages are created on activation and the front page is set. Then do a short visual pass before touching anything.

Compare against the original. The review screen in our converter already shows both side by side in WordPress Playground, but it is worth repeating on your own install with real content.

1. Open the home page on the front end and compare headings with the Lovable site. Look at weight and letterform, not just size.
2. Open Appearance → Editor → Styles → Typography. Confirm the families listed are the ones your project used.
3. Open Styles → Colors → Palette. Confirm your brand colors are there with sensible names.
4. Add a heading block to any page and open the font size dropdown. The presets should mirror your Tailwind scale.
5. Check a long paragraph and a button. These two reveal most inherited-font mistakes.

Changing a font or color after conversion

You have two routes. The Site Editor is the safe one for day-to-day work. Go to Appearance → Editor → Styles, then Typography or Colors. Changes there are saved to the database as user styles and override theme.json without editing files.

The file route is better when you want the theme itself to carry the change, for example before handing it to a client. Edit theme.json in the theme folder. Colors sit under settings.color.palette, sizes under settings.typography.fontSizes, families under settings.typography.fontFamilies. Defaults applied to elements sit under styles.

One rule saves time: change the token, not the block. If a color is wrong, fix the palette entry once. Every block using it updates. If you instead set a custom color on twenty headings, the next design change costs twenty edits.

If you added user styles in the Site Editor and later edit theme.json, the database values still win. Use the revisions panel in Styles to reset back to theme defaults when results look stale. More background is in the converter documentation.

Adding a font the converter did not pick up

Self-hosted or licensed fonts are the usual gap. If your Lovable project loaded a font from somewhere other than Google Fonts, the files may not be in the theme. WordPress has a built-in way to fix that.

Go to Appearance → Editor → Styles → Typography → Font Families. You can upload font files there and the font is stored in the site's uploads, not the theme. That keeps it through a theme update, which is usually what you want.

To put the font in the theme instead, place the files in the theme folder and add a fontFace entry in theme.json with fontFamily, fontWeight, fontStyle and src. Then apply it under styles.typography.fontFamily or on the heading element. The reference for these keys is on developer.wordpress.org.

Watch the variants. A Lovable design that uses weights 400, 600 and 800 needs all three files or three fontFace entries. Missing a weight makes the browser synthesize it, and synthetic bold looks slightly wrong next to the original.

Limits worth knowing

Design tokens convert well. Behavior does not. Fonts that change on scroll, text animated by custom React code, or sizes driven by component state are not reproduced; animations arrive at their final state and interactive components at their default state.

Responsive typography is approximated. We use the desktop values, and WordPress stacks columns on mobile. If your Lovable design had a heading that shrank sharply on small screens, check it on a phone and adjust the block's size or add a clamp value in theme.json.

Colors tied to dark mode toggles, or to anything computed at runtime, land as the state we could measure. Fixing those is a short manual pass in the Site Editor, not a rebuild.

If you want help, every account includes two free AI-fix attempts, and the fix agent can read the source project, measure both pages and edit the theme. Instructions are limited to 2,000 characters per attempt and 20 tool steps per fix. Credit packs are on pricing. For anything about how Lovable itself handles fonts or Tailwind config, check Lovable's documentation.

FAQ

Do Lovable fonts transfer to WordPress automatically?

Google Fonts used by a Lovable project are copied into the generated theme and registered in theme.json, so the theme ships with them. Self-hosted or licensed fonts may not be picked up, because the files are not always part of the exported project. You can upload those manually under Appearance, Editor, Styles, Typography, Font Families.

Where do Tailwind colors end up in the WordPress theme?

They are written into theme.json as a color palette. Each entry then appears as a named swatch in every WordPress color picker, so editors choose brand colors instead of typing hex codes. Changing one palette entry updates every block that uses it.

Should I edit theme.json or use the Site Editor?

Use the Site Editor for everyday changes, since it needs no file access and is reversible through style revisions. Edit theme.json when you want the theme file itself to carry the design, for example before handing the theme to someone else. Note that Site Editor changes override theme.json until you reset them.

Why does my heading font look slightly different in WordPress?

The most common cause is a missing font weight. If the design uses 400, 600 and 800 but only one file is installed, the browser fakes the other weights. Add the missing files or fontFace entries, and the headings will match again.

Does the converter handle responsive font sizes?

Responsive layout is approximated. We use the desktop values, and WordPress stacks columns on small screens by default. If a heading needs to shrink on mobile, set a clamp value in theme.json or adjust the size on that block.

Keep reading