containers / containers/podman.io

Font CSS: missing font-display and three declaration bugs

Open
#544 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
108
Forks
188
Avg merge
3d 14h
Merged PRs (30d)
11

Description

While tracking down a brief blank period on the navbar wordmark during page load, I reviewed
`src/css/fonts/` and found several issues.

**No `font-display` on any face.** All 46 `@font-face` blocks omit the descriptor, so it defaults to
`auto`, which browsers implement as `block`. Text in a face that has not finished downloading renders
invisible for up to 3 seconds rather than falling back to a system font.

```
$ grep -c 'font-display' src/css/fonts/*.css
src/css/fonts/montserrat.css:0
src/css/fonts/source-code-pro.css:0
src/css/fonts/source-sans-pro.css:0
```

`.navbar__title` is the only element that renders a webfont on every page. It is declared as
`font-family: Montserrat` with no fallback, so nothing is painted during that period. It is also worth
noting what that font is being downloaded for: `Montserrat-Medium.ttf` is 193 KB, fetched on every
cold visit to render the six characters of the wordmark. Subsetting it, or rendering the wordmark as
SVG, would be a larger change than this issue but is probably the better long-term answer.

**`font-style: regular` is invalid.** There are 23 occurrences across the three files. The descriptor
accepts `normal | italic | oblique`, so these declarations are discarded and the value falls back to
`normal`. That matches the intent, which is likely why the error has gone unnoticed.

**Malformed family name.** `source-code-pro.css:88` declares `font-family: "Source CodeP ro"`, leaving
that face unreachable. The build drops the block as unused:

```
$ grep -o '@font-face' src/css/fonts/*.css | wc -l
46
$ grep -o '@font-face' build/assets/css/*.css | wc -l
45
```

**Italic 900 faces reference the upright font file.** `montserrat.css:119`, `source-sans-pro.css:80`
and `source-code-pro.css:107` each point at `*-Black.ttf` rather than `*-BlackItalic.ttf`. The correct
files are present in the repository but referenced by nothing.

The last two issues have no visible effect at present, since no page uses `font-black` or combines
`font-mono` with `font-extrabold`. They will affect the first person who does.

I can submit a PR covering all of these: three CSS files plus one line in `main.css` for the fallback
stack.

Two related observations I would rather raise separately than bundle here. Source Sans Pro is declared
across 12 faces, but `font-text` does not appear anywhere in the built output. And every font file is
emitted twice, once under `build/fonts` and again hashed under `build/assets/fonts`.

Contributor guide

No contributing guide indexed for this repository

Research direction

Inspect src/css/fonts/montserrat.css, source-code-pro.css, source-sans-pro.css, and the relevant line in main.css. Use the grep commands in the issue to verify the font-face and font-display counts, then check the named declarations and font paths. Done means all faces have the intended display behavior, invalid styles and family names are corrected, italic 900 faces reference the italic files, and the navbar title has a fallback stack.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.