오랫동안 잠자고 있던 사이드 프로젝트를 시작하면서 code-server도 다시 정비를 했습니다. code-server 쓰면서 항상 눈에 거슬리지만 귀찮아서 매번 미뤄두었던 폰트 설정을 해봤습니다.
항상 같은 장비에서 작업한다면 로컬에 폰트 깔아놓고 사용하면 되지만, 저처럼 여기서 잠깐 저기서 잠깐 코딩하고 윈도 장비 같은 경우에는 포맷도 자주 하는 환경이라면 로컬에 설치하는 폰트는 의미가 없죠. 그래서 code-server가 호스팅 되는 서버에 폰트까지 넣어두고 어디서나 이쁜 폰트가 렌더링 되도록 하는 건 중요한 포인트라고 할 수 있죠.
금방 끝날 줄 알았는데 이것저것 헤매다가 드디어 성공해서 그 방법 남겨봅니다.
폰트 준비
먼저 제가 애정하는 Meslo Nerd Font를 다운로드하여서 준비합니다.
일반폰트 굵은 폰트 그리고 이텔릭 폰트까지 총 4개 받았는데 일단 일반폰트 normal, bold 두 개만 우선 설정하겠습니다. 저는 아래 링크에서 받았습니다.
GitHub - fontmgr/MesloLGSNF: MesloLGS NF fonts
MesloLGS NF fonts. Contribute to fontmgr/MesloLGSNF development by creating an account on GitHub.
github.com
폰트 및 스타일시트 업로드
이제 준비된 폰트를 code-server에 올려야 하는데, 폰트 작업을 할 위치를 어디로 잡아야 할지 난감합니다. 인터넷 글들을 찾아보면 다양한 버전이 존재합니다. code-server 버전마다 다르고 그리고 설정하시는 분들 취향 따라 다른 것 같기도 하고, 아무튼 저는 서너 가지 방법 따라 해 봤는데 그중에서 2가지 방법으로 성공했고 그 2가지를 살짝 짬뽕해서 이렇게 정착했습니다.
작업을 할 폴더 위치는 다음과 같습니다.
/usr/lib/code-server/lib/vscode/out/vs/code/browser/workbench
일단 VSCode나 Code-server로 상기 언급한 폴더를 작업 폴더로 해서 열어줍니다. 그리고 이 폴더에 파일도 올리고 폴더도 만들어야 하니 권한을 변경해 줍니다.
> sudo chmod ugo+rwx -R /usr/lib/code-server/lib/vscode/out/vs/code/browser/workbench
이제 여기에 폰트도 올려주고 CSS파일도 하나 만들어 줍니다.
fonts라는 이름으로 폴더 하나 만들고 거기에 폰트파일 저장했고, fonts.css라는 파일 새로 만들었고 아래 내용으로 파일 채웠습니다. 여기서 font-family를 "MesloLGS NF"로 지정했는데 이 값을 나중에 사용하게 됩니다.
@font-face {
font-family: 'MesloLGS NF';
src: url('./fonts/MesloLGS-NF-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'MesloLGS NF';
src: url('./fonts/MesloLGS-NF-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
font-display: swap;
}폰트 설치
이제 code-server가 렌더링 될 때 이 폰트들을 읽어 줄 수 있도록 페이지에 추가합니다. 추가할 파일은 "workbench.html"입니다. 이 파일의 <HEAD> 사이에 다음 코드 추가합니다. 앞에서 준비한 스타일시트 파일을 본문에 추가해 주는 겁니다.
<link href="{{WORKBENCH_WEB_BASE_URL}}/out/vs/code/browser/workbench/fonts.css" rel="stylesheet" />그러면 대충 아래와 같은 형태가 되겠죠.
code-server 재시작
code-server 재시작해서 추가된 폰트 적용시킵니다.
sudo systemctl restart code-server@$USER
이제 모든 사전 작업이 끝났습니다.
폰트 적용
code-server의 설정창을 열고 Font 섹션에 다음과 같이 추가된 폰트의 이름을 넣어줍니다. 앞서 작성했던 font-family의 값을 넣어주면 되죠. 그럼 터미널창에 네모 네모로 깨져 나오던 부분에 귀여운 펭귄도 생기도 집모앙 아이콘도 생겼습니다. ^^
끝!
'Tips' 카테고리의 다른 글
| 페이팔에서 신한 아멕스 카드 사용하시려면 인내심이 필요합니다. (4) | 2023.10.25 |
|---|---|
| 리눅스 파일 권한(permissions)의 기본 (0) | 2023.07.30 |
| RDP, Windows Defender Credential Guard는 저장된 자격 증명 사용을 허용하지 않습니다?! (0) | 2023.07.02 |
| 삼성 갤럭시 탭4 10.1 SM-T530 안드로이드 9(LineageOS 16) 업그레이드 (42) | 2023.03.24 |
댓글