Skip to content

Invalid default font set in the CSS #714

Description

@timolehto

In the styles we set the default fonts to use Inter Variable:

--aw-font-sans: 'Inter Variable';
--aw-font-serif: 'Inter Variable';
--aw-font-heading: 'Inter Variable';

However, the CSS sets the primary font to string 'var(--aw-font-sans, ui-sans-serif)'

'var(--aw-font-sans, ui-sans-serif)', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--font-serif: 'var(--aw-font-serif, ui-serif)', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
--font-heading: 'var(--aw-font-heading, ui-sans-serif)', ui-sans-serif, system-ui, sans-serif;

Which is obvisly not a valid font name thus the browser always uses a fallback font and e.g. on my machine Chrome ends up using Cantarelle:
Image

It's an easy fix, just remove the ' around the variable references.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions