Skip to content

Bug: @font-face declarations use invalid comma syntax and inconsistent naming #136

@patdhlk

Description

@patdhlk

Found in: #121

Problem

The @font-face declarations in _fonts.scss have two issues:

  1. Comma syntax inside @font-face { font-family } is invalid. The font-family descriptor in @font-face defines a single name, not a fallback list. Writing font-family: Fira Mono, monospace; does not create a fallback — it registers a literal name including the comma, producing undefined/browser-dependent behavior.

  2. Inconsistent naming. The first declaration uses FiraMono (no space) while the other two use Fira Mono (with space). These are different font-family names in CSS, so the regular weight will never match the bold/medium weights.

Expected fix

Use a consistent quoted name across all three @font-face blocks, then reference it with a fallback in regular style rules:

@font-face {
    font-family: "Fira Mono";
    src: url(fonts/FiraMono-Regular.ttf);
}
@font-face {
    font-family: "Fira Mono";
    font-weight: 500;
    src: url(fonts/FiraMono-Medium.ttf);
}
@font-face {
    font-family: "Fira Mono";
    font-weight: bold;
    src: url(fonts/FiraMono-Bold.ttf);
}

Then in usage rules: font-family: "Fira Mono", monospace;

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    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