티스토리 JetBrains Mono 웹폰트 적용 시 글자가 다를 때/이상할 때

티스토리나 블로그의 코드 블럭에서 JetBrains Mono 폰트를 적용했을 때 ligature와 글리프가 다르게 보이는 현상을 수정하는 CSS 구문을 소개합니다.

평소에 ide에서도 JetBrains Mono 폰트를 쓰고 있어서
티스토리 코드 블럭에 JetBrains Mono 폰트 적용해서 사용하고 있는데,
오늘 뭔가 글씨가 쎄~~ 하길래 neovim 켜서 비교해 보니까 실제로 글씨가 적용된 게 많이 다르더라고요

차이가 보이시나요
r이랑 y의 glyph? 가 확실히 차이 납니다.

해결법

-webkit-font-feature-settings: 'liga' on, 'calt' on;

요 라인을 추가해주면 됩니다.

code {
    font-family: JetBrains Mono, D2Coding, 'D2 coding', monospace;
    -webkit-font-feature-settings: 'liga' on, 'calt' on;
}

이상입니다.