Font metric overrides
The ascent-override, descent-override, and line-gap-override descriptors adjust the display of a font declared in an @font-face statement. This can help make fallback fonts look the same size. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The ascent-override, descent-override, and line-gap-override descriptors adjust the display of a font declared in an @font-face statement. This can help make fallback fonts look the same size. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 87 | 87 | 89 | | 87 | | |
| DOM API | ||||||
| The descentOverride property of the FontFace interface returns and sets the value of the @font-face/descent-override descriptor. The possible values are normal, indicating that the metric used should be obtained from the font file, or a percentage. | 87 | 87 | 89 | | 87 | |
| The lineGapOverride property of the FontFace interface returns and sets the value of the @font-face/line-gap-override descriptor. The possible values are normal, indicating that the metric used should be obtained from the font file, or a percentage. | 87 | 87 | 89 | | 87 | |
| CSS at-rule | ||||||
| The ascent-override CSS descriptor for the @font-face at-rule defines the ascent metric for the font. The ascent metric is the height above the baseline that CSS uses to lay out line boxes in an inline formatting context. | 87 | 87 | 89 | | 87 | |
| The descent-override CSS descriptor for the @font-face at-rule defines the descent metric for the font. The descent metric is the height below the baseline that CSS uses to lay out line boxes in an inline formatting context. | 87 | 87 | 89 | | 87 | |
| The line-gap-override CSS descriptor for the @font-face at-rule defines the line-gap metric for the font. The line-gap metric is the font recommended line-gap or external leading. | 87 | 87 | 89 | | 87 | |
Syntax
@font-face {
font-family: "Adjusted Fallback";
src: local("Arial");
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}Live demo
Use cases
Refine text rhythm
Use Font metric overrides to make long-form reading or dense interface copy easier to scan and understand.
Support language nuances
Apply Font metric overrides when different writing systems or typographic conventions need more deliberate control.
Cautions
- Test Font metric overrides in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Check readability with zoom, narrow screens, and mixed-language content so text remains understandable.
Related links
Powered by web-features