MAC VSCode 터미널 폰트 아이콘 깨짐 현상 해결방법

최근 OS X에서 개발 도중, 특정 노트북에서 사용하지도 않은 램이 과도하게 점유하는 문제를 확인하여, VSCode를 재설치하게 되었다. 다른 Extensions들은 키워드 검색을 통해서 손쉽게 설치가 가능하지만, 폰트의 경우 자동으로 적용되는 것이 아니라서 조금 더 손이 간다. 필자의 경우, iterms의 zsh 설정으로 여러 아이콘들 또한 보이게 셋팅이 되어있었던 터라, Code를 재설치하니 기본 폰트인 monospace가 적용되어 아이콘들이 깨지는 현상이 아래와 같이 발생하였다. 해결 방법은 간단하다. 

VSCode 터미널 내 아이콘들이 깨져보이는 현상

 

반응형

1. iterms 상단 바 - iterm2- Settings - Profiles - Text 내의 Font란에서 서체를 확인

Iterms에서는 정상적으로 아이콘이 출력이 된다.

Font란을 확인하면 MesloLGS NF인 것을 확인할 수 있다.

필자의 경우, MesloLGS NF의 서체를 통해서 한글과 특수문자/아이콘들이 보이는 것을 확인할 수 있었다. 

 

2. VSCode 실행 및 Show all commands(cmd+shift+p)로 접근하여, Preferences: Open User Settings(JSON)을 열어준다.

(> 창에서 settings.json을 치면 2개가 보이는데, default가 아닌 user 로 선택)

3. json 파일 내에 아래의 코드를 추가해준다. (폰트명이 다를 경우, 본인의 설정에 맞는 폰트이름으로 바꿔준다.)

{
	"terminal.integrated.fontFamily": "MesloLGS NF",
}

입력한 모습이다. Line 5에 추가하였다.

 

4. 다시 Show all commands를 통해, terminal font를 검색하여 [Terminal > Integrated: Font Family] 내에 원하는 서체가 적용되었는지 확인하여, 적용이 안되었으면 서체명을 입력해 준다.

 

 

입력을 하게 되면 즉각적으로 반영이 되는것을 확인할 수 있다. 

참고

 : https://2vup.com/mac-vscode-font-setting/#google_vignette