Go to Font Property Adjuster

@font-face Metrics Adjuster

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

🤍 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.

Settings

40px

🤍 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 uses 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. For example, size-adjust: 200% scales font glyphs to twice their original size; size-adjust: 50% scales font glyphs to half their original size.

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

Preview
Ag Xy 123 あいうえお　一二三 😍
Ag Xy 123 あいうえお　一二三 😍
@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; }

Resources: