If you're looking for adjusting CSS font appearance, go to: CSS Font Appearance Adjuster

Font Metrics Adjuster

With this tool, you can adjust @font-face descriptors to match fallback fonts to web fonts, minimizing CLS during font loading.

  • Font Metrics Override APIs:
    • ascent-override: Adjust ascent (Upper height from the baseline of the glyph)
    • descent-override: Adjust descent (Lower height from the baseline of the glyph)
    • line-gap-override: the distance between successive lines of text (so-called "leading")
  • Glyph Scaling:
    • size-adjust: Adjust overall font size
  • Loading Behavior:
    • font-display: Control how the font is displayed while it is loading.
      • auto: The font is displayed using the smallest possible font that meets the font-size criteria.
      • block: The font is displayed using the font-size value specified in the font-size property.
      • swap: The font is displayed using the font-size value specified in the font-size property.
      • fallback: The font is displayed using the font-size value specified in the font-size property.
  • Character Subsetting:
    • unicode-range: Control which characters are included in the font.
      • U+0-10FFFF: All characters
      • U+0-7F: Basic Latin
      • U+0-FF: Latin-1
      • U+4E00-9FFF: CJK Unified Ideographs

🀍 DECLAIMER: This is just a demonstration of how to customize font face. Therefore, it's not for practical use, and there's no functionality to use personal web fonts.

🀍 DECLAIMER: The changes you make with the adjusters will be debounced for 50ms for the performance reasons.

🀍 Well, you can apply the properties to web font, for sure, though it's easier and more makes sense to adjust the fallback for better compatibility and maintainability.
Local fonts for fallbacks are OS-dependent, which means that if you try to adjust your web font to fallbacks, you need to adapt all the fonts of the web font according to the OS. This is likely to be more work than adapting fallbacks to web fonts, so it's better to do the opposite in practice. ;)

@font-face

🀍 There are two possible approaches to generating "improved" font fallbacks. The simpler approach uses only the Font Metric overrides API. The more complicated (but more powerful) approach is to use both the font metric overrides API and size-adjust. You can try both of these approaches.

Font Metrics Override APIs

Font metric overrides can be used to override the ascent, descent, and line-gap of a fallback font to match the ascent, descent, and line-gap of the web font. As a result, the web font and the adjusted fallback font will always have the same vertical dimensions.

In order to get precise numbers of each property, some calculations are needed. (see: Improved font fallbacks | Blog | Chrome for Developers)
For Google Fonts, there's a repo that the all proper font metric override values are exposed. You can check it out from here.

100%
32%
0%

Glyph Scaling: size-adjust

The size-adjust CSS descriptor proportionally scales the width and height of font glyphs.

By itself, size-adjust has limited applications for improving font fallbacks: in most cases, a fallback font needs to be narrowed or widened slightly (rather than scaled proportionally) in order to match a web font. However, combining size-adjust with font metric overrides makes it possible to make any two fonts match each other both horizontally and vertically.

100%

Loading Behavior: font-display

In Addition, you can specify font-display to control how the font is displayed while it is loading. It controls and minimizes FOIT (Flash of invisible text). For more details, see: Controlling Font Performance with font-display | Blog | Chrome for Developers , 3. Font Rendering Controls | Font CSS Fonts Module Level 4

Character Subsetting: unicode-range

In addition, you can specify unicode-range to control which characters are included in the font. This is useful for reducing the size of the font file and improving performance. For more details, see: @font-face/unicode-range - CSS: Cascading Style Sheets | MDN

Resources:

Settings

40px

Preview

Ag Xy 123 γ‚γ„γ†γˆγŠγ€€δΈ€δΊŒδΈ‰ 😍
Ag Xy 123 γ‚γ„γ†γˆγŠγ€€δΈ€δΊŒδΈ‰ 😍

web font metrics (labelled) adjusted fallback metrics web font half-leading fallback half-leading

Measured on the first line. line box = ascent + descent + half-leading Γ— 2
layer line box ascent cap-height x-height descent half-leading

@font-face { font-family: 'adjusted-fallback'; src: local("Arial"); size-adjust: 100%; font-display: swap; ascent-override: 100%; descent-override: 32%; line-gap-override: 0%; unicode-range: U+0-10FFFF; }