size-adjust, and a fallback that occupies the same space

The layout shift when a font swaps comes from the fallback having different metrics, and the descriptors let a fallback be adjusted to match.

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

body { font-family: Inter, 'Inter Fallback', sans-serif; }

The numbers come from comparing the two fonts’ metrics and there are generators that compute them, which is more reliable than trial and error. This makes swap nearly shift-free and is the technique that lets a site keep its font without paying for the layout instability, which is the best available answer in 2022.