w3c / w3c/csswg-drafts

[css-fonts-4] Browser behaviour for @font-feature-values/font-display on rel="preload"

Open
#3,069 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-fonts-4
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

I understand font-display in @font-feature-values is a recommended feature to control display of fonts when you have no direct control of the @font-face block such as loading from Google Fonts.

However, it doesn't seem to specify what happens if the browser doesn't see the @font-face yet.

For example, I might use rel="preload" for Google fonts and the browser might start painting the page before the css is downloaded.

Suppose I use

font-display: block;

inlined in the HTML.

Would the browser show invisible text or the fallback font?

This question arises because it may have been assumed that the css is loaded synchronously in which case painting doesn't occur until the css is downloaded and parsed in which case both font-feature-settings/font-display and the @font-face block is known to the browser and in this case fallback font isn't used.

Cannot assume this if css is preloaded.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the css-fonts-4 definitions for @font-feature-values and font-display, then compare them with the rel="preload" scenario described in the issue. Determine whether the specification defines the rendering behavior before @font-face is available; done means the expected fallback or invisible-text behavior and relevant timing are explicitly resolved.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.