OSやブラウザ違いでWebフォントの表示がずれるケースは今まで多々遭遇してきましたが、今回新たにモニターのピクセル密度の違いによっても表示にずれが発生するケースに遭遇したので軽くまとめです。
Webフォントのずれは IE11＋游ゴシックで発生していた現象と同じ
IE11がばっこしていた古の時代に游ゴシックを使うと表示が上にずれるという問題がありました。
これは文字のインラインボックス内で、その文字がなぜか上の方に描画されてインラインボックスの下余白が過剰にあいてしまう（上余白が過剰に狭くなってしまう）現象で、游ゴシックブームの時に何度も遭遇した事象でしたが、
実はWebフォントでも良く起こり得る現象で文字に対する戦いは令和になっても続いています。
↑の画像はWebフォント（Adobe Fonts）でインラインボックスのずれが発生している様子のスクリーンショットです。line-height: 1; font-size: 100px; 設定にも関わらず、下に過剰な余白が出てしまっています。
表示のずれが発生する環境
そもそもの問題として、Webフォントを利用している場合は全ての環境でずれが発生している可能性があります。
主な表示環境（全て最新のバージョン）
Windows：Chrome（Edge）
Windows：Firefox
PC：Mac：Chrome
PC：Mac：Firefox
PC：Mac：Safari
モバイル：IPhone（iPad）：Safari
モバイル：Andoroid：Chrome
※列挙したのはベーシックな案件でよくターゲットとされる主要なブラウザ・閲覧環境です。
モニターのピクセル密度によっても表示が変わる可能性
先ほど上げたOSやブラウザの違いに加えて、今回新たにモニターのピクセル密度によっても表示が違うケースに遭遇しました。
ピクセル密度とは
ピクセル密度は1インチ四方に配置されているピクセルの数を指します。どれだけきめ細かく描画できるかといったもので、ピクセル密度が高いほどディスプレイ上の画像やテキストがより鮮明で滑らかに表示されます。
全てではないと思いますが、WindowsのフルHDモニターなどは大体がピクセル密度1（1dppx）で、MacやiPhoneのRetinaディスプレイはピクセルが密度2（2dppx）のためWindowsよりMacの方が表示が綺麗といったケースの場合、このピクセル密度が関係してるかもしれません。
視覚的な目安として、Windows環境などで文字がジャギって見える場合はピクセル密度1（1dppx）なことが多いです。
モニターのピクセル密度を確認する
調べたいモニターでブラウザを表示させ、ブラウザの検証＞コンソールタブで以下のJavaScriptコードを実行するのが手っ取り早いと思います。
window.devicePixelRatio
Macでモニターのピクセル密度を変更する
外部モニターの仕様によっては出来ないかもしれませんが、 解像度を変える以下部分をいじると同じモニターでもピクセル密度を（1dppx or 2ddpx ）に変更することができました。
システム環境設定＞ディスプレイ＞外部ディスプレイを選択＞使用形態
※MacBookでミラーリングをした場合、window.devicePixelRatioがRetinaディスプレイの値を読み取ってしまうようなので「拡張ディスプレイ」のモードで表示確認した方が良さそうです。
※今回上げた方法はMacのみですが、Windowsでも設定項目にあるモニターの解像度や拡大率を変更するとピクセル密度を変更することが可能です。
MacBookを外部モニター（ピクセル密度1（1dppx））に繋いで表示させたものと、Retinaディスプレイで見た表示に差が出た
今回遭遇したケースは、同じPC MacのChrome（バージョン最新）だったにも関わらず先方と僕の表示が異なっているというものでした。
原因を探っていくと、Retinaディスプレイ（ピクセル密度2（2dppx））と、外部モニター（ピクセル密度1（1dppx））のChromeで表示が変わっていることが分かりました。
可能な範囲で表示パターンを調査
案件の要件に沿った形ですが、可能な範囲でOS・ブラウザ・ピクセル密度の表示パターンをチェックしてみました。
補足・注意点
英数字のみ対応のAdobe Fontsでアルファベットを描画した部分で調査
※読み込ませるWebフォントごとに表示は異なる可能性があるため、今回の検証結果は全てのケースに当てはまるものではないと思います。あくまでも参考程度に見てください
1dppxがピクセル密度1、2ddpxがピクセル密度2のモニターです
ベースのコーディング環境は（PC：Mac：Chrome：2ddpx）で、その表示と比較しています
ずれ方の具合もそれぞれの環境によって異なることが多いので、WIndows：ChromeとMac：Safariに同じ設定を入れるといったことができないことも多い（できる時もあるので本当にケースバイケース…）
結果
WIndows：Chrome（Edge）：1dppx,2dppx 両方ずれてる（ずれ方同じ）
WIndows：Firefox：1dppx,2dppx 両方ずれてる（ずれ方同じ）
Mac：Chrome：1ddpxだけずれてる
Mac：Safari：1ddpx,2dppx 両方ずれてる（1dppxと2dppxでずれ方が違う）
Mac：Firefox：1dppx,2dppx 両方ずれてる（ずれ方同じ）
Andoroid：Chrome（2機種：2.6dppx、3dppx 環境で見た）：ずれてる
iPhone SE：Safari：ほぼずれてはいないが、コーディング環境（PC：Mac：Chrome：2ddpx：検証によるモバイル表示）とも合致していない微妙なずれがある
今回のまとめ
まず根本的な問題として、Windows、Mac、AndroidなどOSやブラウザ違いによってWebフォントの表示がずれることはよくある
個人的にはAdobe Fontsや購入したWebフォントで特に多い印象があります
上記問題に加えて、今回はMacの場合はモニターのピクセル密度の違い（1dppx、2dppx）でもWebフォントのずれ具合に違いがあった
PCでずれている場合はAndoroidも大体ずれている
WindowsとMacでずれている時はAndoroidも大体ずれていると思った方が良いかもしれません
どうやって対処したら良いのか
毎回どうすれば良いか本当に悩みのタネですが、複雑なケースへの対処はJavaScriptでOSとブラウザ判定をしてstyleを出し分けるしかないかもしれません。
ピクセル密度の違いはメディアクエリ（max-resolution、min-resolution、max-device-pixel-ratio、min-device-pixel-ratio）があるので、CSSのみでも対処できそうですが、
今回のケースのようにOSや環境ごとに設定を変更したい場合などは、JavaScript（userAgentDataやuserAgentなど）で上手く判定しつつ、上記メディアクエリなども組み合わせて個別に調整していくのが良いかもしれません。
さいごに
Webサイトを構築するうえで欠かせないfont-familyの設定ですが、昨今はGoogle FontsやAdobe Fontsなど、外部サービスを用いて気軽にWebフォントを利用するケースも多々あると思います。
しかし実装者の目線では、ページ読み込みのパフォーマンス低下のボトルネックになったり、上記のような環境別で表示がずれる問題もはらんでおり、しっかり実装しようと思うと実は実装コストが非常に高いものでもあります。
Webフォントはサイトのトンマナ（雰囲気）を作るという大切な主目的があるとは思いますが、本記事のようなデメリットも沢山あるということを少しでも知るきっかけになってくれたら嬉しいです。