Skip to content

Unquote the font-family var() references so the theme fonts apply (#714) - #718

Merged
prototypa merged 1 commit into
arthelokyo:mainfrom
peterpla:fix/714-unquote-font-family-vars
Jul 23, 2026
Merged

Unquote the font-family var() references so the theme fonts apply (#714)#718
prototypa merged 1 commit into
arthelokyo:mainfrom
peterpla:fix/714-unquote-font-family-vars

Conversation

@peterpla

Copy link
Copy Markdown
Contributor

Fixes #714.

The bug

In src/assets/styles/tailwind.css the three font tokens wrap their var() calls in quotes:

--font-sans: 'var(--aw-font-sans, ui-sans-serif)', ui-sans-serif, system-ui, sans-serif, ...;

A quoted string in font-family is a literal family name, not a substitution. The browser looks for a font actually named var(--aw-font-sans, ui-sans-serif), fails to find one, and falls through to the next family in the list — so --aw-font-sans (and its serif/heading siblings) never take effect, and the Inter set in CustomStyles.astro never renders. It goes unnoticed because the fallback is a reasonable system sans.

The quoting belongs on the valueCustomStyles.astro already correctly declares --aw-font-sans: 'Inter Variable' — not on the var() call.

The fix

Remove the quotes around the three var() references. One-line change each; no other behaviour is affected.

Verification

Confirmed on a build of this template with a custom font in CustomStyles.astro, using Chrome DevTools Protocol CSS.getPlatformFontsForNode to read the font the browser actually painted with (rather than the computed font-family string, which does not reveal the failed lookup):

before after
painted font Segoe UI (fallback) Nunito Variable (the configured font)
document.fonts.check('700 60px "Nunito Variable"') false true

The variable-weight axis also renders correctly after the fix (rendered text width grows monotonically from weight 200 → 900), confirming the face is genuinely in use and not merely loaded.


Created by Claude Code

The quotes made each var() a literal family name, so the browser searched for a
font called "var(--aw-font-sans, ui-sans-serif)", never found one, and fell
through to the next family in the list. Inter never applied on any AstroWind
site; the bug is easy to miss because the fallback is a plausible system sans.

Fixes arthelokyo#714
@anatolykoptev

This comment was marked as spam.

@prototypa
prototypa merged commit 5cea946 into arthelokyo:main Jul 23, 2026
2 checks passed
prototypa added a commit that referenced this pull request Aug 4, 2026
Unquote the font-family var() references so the theme fonts apply (#714)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Invalid default font set in the CSS

3 participants