본문 바로가기
1% 이해하기 시리즈/vscode

[vscode 1% 이해하기] Jetbrains Mono 폰트 vscode 적용하기 (feat. Font Ligature)

by TLOWAC 2024. 3. 26.

 

📍목차

📍들어가며

📍Jetbrains Mono 폰트 적용하기

    1) 폰트 다운로드

    2) 폰트 적용하기

    3) vscode Font Ligature 활성화하기

📍마무리하며

 

 

 

📍 들어가며

vscode 에서 Ligature 기능을 활성화 하면 '===' , '!=', '>=', '=>' 등의 문구를 아래의 이미지와 같이 변경 할 수 있습니다.

하지만, 모든 폰트에서 Ligature 기능을 지원하지 않기 때문에 이를 지원하는 폰트를 찾아 vscode 에 적용해야합니다.

Ligature 기능

 

 

 

📍Jetbrains Mono 폰트 적용하기

1) 폰트 다운로드

아래의 링크를 통해 Ligature 기능을 지원하는 Jetbrains Mono 폰트를 다운로드 합니다.

https://www.jetbrains.com/lp/mono/#how-to-install

 

JetBrains Mono: A free and open source typeface for developers

Try JetBrains Mono in your IDE. Its simple forms and attention to every detail make coding a nice experience for developers’ eyes, no matter which IDE you choose.

www.jetbrains.com

 

 

2) 폰트 적용하기

폰트를 다운로드 했다면, 압축을 풀고 ttf 라는 이름의 폴더로 이동합니다.

ttf 폴더에 있는 모든 폰트 파일을 선택하고 더블 클릭하면 해당 폰트를 설치 할 수 있습니다.

 

 

3) vscode Font Ligature 활성화하기

앞선 과정을 통해 폰트를 다운받았다면, 이제 vscode 에서 해당 폰트를 사용하기 위해 settings.json 을 수정해야 합니다.

vscode 에서 'Crtl + Shift + p' 단축키를 입력하고 "settings json" 을 검색하여 settings.json 을 열어 editor.fontFamily, editor.fontLigatures 를 검색합니다.

 

아래와 같이 Jetbrains Mono 폰트와 Ligature 기능을 활성화 합니다.

- editor.fontFamily : "Jetbrains Mono"

- editor.fontLigatures : true

 

 

 

vscode 에 폰트 설정이 정상적으로 반영 되었다면, '===' , '!=', '>=', '=>' 등의 문구의 모양이 변경된것을 확인 할 수 있습니다.

만약, 폰트 설정이 반영 되지 않았다면 vscode 를 재시작을 권장 드립니다!

 

 

 

📍마무리하며

Font Ligature 기능을 활성화 하는 과정에서 Jetbrains Mono 폰트를 vscode 에 적용까지 하는 방법을 정리해보았습니다.

Jetbrains Mono 폰트가 별로라면 Font Ligature 기능을 지원하는 firacode 폰트도 있으니 관심 있으신 분들은 추천 드립니다!

 

 

긴글 읽어주셔서 감사합니다 :)

이만 글을 줄입니다.

 

 

댓글