Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Replace CSS at-rule links with cssxref in /web/api
Search: \[`([^`]+?)`\]\(/en-US/docs/Web/CSS/Reference/At-rules/\1\)
Replace: {{cssxref("$1")}}
  • Loading branch information
dipikabh committed Dec 16, 2025
commit 177e1e0c283bb15e66bfb3e11d5efdb9f5b156fe
6 changes: 3 additions & 3 deletions files/en-us/web/api/css_font_loading_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ The **CSS Font Loading API** provides events and interfaces for dynamically load

## Concepts and usage

CSS stylesheets allow authors to use custom fonts; specifying fonts to download using the [`@font-face`](/en-US/docs/Web/CSS/Reference/At-rules/@font-face) rule, and applying them to elements with the {{cssxref("font-family")}} property.
CSS stylesheets allow authors to use custom fonts; specifying fonts to download using the {{cssxref("@font-face")}} rule, and applying them to elements with the {{cssxref("font-family")}} property.
The point at which a font is downloaded is controlled by the user agent.
Most agents only fetch and load fonts when they are first needed, which can result in a perceptible delay.

The CSS Font Loading API overcomes this problem by letting authors control and track when a font face is fetched and loaded, and when it is added to the font face set owned by the document or worker.
Adding a font face to the document or worker font face set allows the user agent to fetch and load the associated font resource automatically if needed.
A font face can be loaded either before or after it is added to a font face set, but it _must_ be added to the set before it can be used for drawing.

Font faces are defined in {{domxref('FontFace')}} objects, which specify a binary or URL font source and other properties of font in much the same way as the CSS [`@font-face`](/en-US/docs/Web/CSS/Reference/At-rules/@font-face) rule.
Font faces are defined in {{domxref('FontFace')}} objects, which specify a binary or URL font source and other properties of font in much the same way as the CSS {{cssxref("@font-face")}} rule.
`FontFace` objects are added to the document or worker {{domxref('FontFaceSet')}} using {{domxref("Document.fonts")}} and {{domxref("WorkerGlobalScope.fonts")}}, respectively.
Authors can trigger download of fonts using either `FontFace` or `FontFaceSet`, and monitor loading completion.
`FontFaceSet` can additionally be used to determine when all fonts required by a page have loaded and the document layout is complete.
Expand All @@ -32,7 +32,7 @@ The status is set to `loaded` when the font face data has been successfully fetc
### Defining a font face

Font faces are created using the [`FontFace` constructor](/en-US/docs/Web/API/FontFace/FontFace), which takes as parameters: the font family, the font source, and optional descriptors.
The format and grammar of these arguments is the same as the equivalent [`@font-face`](/en-US/docs/Web/CSS/Reference/At-rules/@font-face) definition.
The format and grammar of these arguments is the same as the equivalent {{cssxref("@font-face")}} definition.

The font source can either be binary data in an [`ArrayBuffer`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) or a font resource at a URL.
A typical font face definition using a URL source might be as shown below.
Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/stylesheet/ownernode/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ console.log(document.styleSheets[0].ownerNode);
## Notes

For style sheets that are included by other style sheets, such as with
[`@import`](/en-US/docs/Web/CSS/Reference/At-rules/@import), the value of this
{{cssxref("@import")}}, the value of this
property is `null`.

## Specifications
Expand Down