[code-server] ipad의 웹브라우저에서 integrated terminal에 NerdFont 적용하기

oh-my-zsh를 사용하도록 code-server의 장비를 설정하고 나서,

 

가장 짜증이 나는 점이

ipad의 모든 웹 브라우저로 접속할 경우,

integrated terminal의 oh-my-zsh prompt에 있는 icon이 모두 깨져서 제대로 보이지 않는 문제였다.

 

Windows terminal을 통해 ssh로 접속하거나

데스크탑의 웹브라우저(웹브라우저 설정에서 font를 icon을 지원하는 것으로 변경)에선 아무 문제가 없는데

ipad의 모든 웹브라우저에선 아예 font를 바꿀 수 없었다.

 

ifont나 SFFE 등의 앱을 이용하여 ipad에서 font를 바꾸는 방법을 적용해도 integrated terminal에서 icon은 계속 깨져 보였다.

 

연휴 시작과 함께 이를 해결하기 위해 code-server의 font 관련하여 github를 뒤지기 시작했는데 생각보다 금방 해결책을 찾았다.

2022년에 벌써 관련 patch가 있었다. ==;; 지금까지 뭘한건지...

 

open-source 프로젝트의 경우, github repository를 먼저 살펴봤어야 했는데...

ipad의 폰트만 변경하려고 했던 생각이 문제 해결을 막았던 것이었다. ==;;

 

해당 repository는 매우 단순 명확하게 README.md를 작성해 놓은 터라... 5분도 안되서 해결했다. ㅋ

참고로 code-server의 버전은 4.16.1 임

 

다음은 찾은 github repository 의 URL과 이를 백업하기 위해 fork한 repository임. (가급적 원본을 참조할 것)

https://github.com/tuanpham-dev/code-server-font-patch

GitHub - tuanpham-dev/code-server-font-patch: This patchs code-server to enable load fonts (IBM Plex Mono and Fira Mono For Powe

https://github.com/dsaint31x/code-server-font-patch: fork를 해뒀다.

GitHub - dsaint31x/code-server-font-patch: This patchs code-server to enable load fonts (IBM Plex Mono and Fira Mono For Powerli

해당 patch를 통해 수행한 내용은 다음과 같음.

 

일단 해당 repository를 clone한 후,

 

clone이 된 디렉토리로 이동하고,

• 그 밑에 있는 resources/fonts 디렉토리에
• 사용할 font family인 CaskaydiaCove Nerd Font Mono의 ttf파일 중 하나인
• CaskaydiaCoveNerdFontMono-Regular.ttf 파일을 copy했다.

참고로 해당 patch에서 원래 있던 font들은 개인적으로 사용하지않기 때문에 삭제했다.

 

그리고, resources/fonts.css파일을 열고, 기존 내용을 지우고 다음의 내용으로 변경했다.

@font-face {  
  font-family: 'CaskaydiaCove Nerd Font Mono';  
  src: url('fonts/CaskaydiaCoveNerdFontMono-Regular.ttf') format('truetype');  
  font-weight: 400;  
  font-style: normal;  
}

 

이후엔, clone이 이루어진 디렉토리로 이동하여 거기에 있는 patch.sh을 sudo로 실행해주면 된다.

sudo ./patch.sh

 

이후 code-server를 재시작시킨다.

systemctl --user restart code-server.service

이후 접속하고 terminal을 열어보면 zsh의 prompt에서 제대로 된 icon을 볼 수 있다.