참고 링크: https://github.com/coder/code-server/issues/1374
code-server에 커스텀 폰트를 적용하는 방법을 알아보자.
커스텀 폰트는 웹폰트를 사용하는 방식으로 적용 할 것이다.
보통 code-server는 가상머신에 올려서 사용하는 사람이 많을 것이므로, 우분투를 기준으로 설명하겠다.
workbench.html을 잘 찾아서<head>태그 안에 아래 코드를 추가한다.
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap');
</style>다른 폰트를 사용하고 싶으면 적당히 다른 폰트의 url을 사용하면 되겠다.
workbench.html은 4.1.x 버전에서는/usr/lib/code-server/vendor/modules/code-oss-dev/out/vs/code/browser/workbench/workbench.html, 4.2.x 버전에서는 /usr/lib/code-server/lib/vscode/out/vs/code/browser/workbench/workbench.html에 있다.
따라서 이를 bash 코드로 자동화 할 수도 있다.
4.1.x버전
sudo sed -i "s%</head>%<style>@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding\&display=swap');</style></head>%g" /usr/lib/code-server/vendor/modules/code-oss-dev/out/vs/code/browser/workbench/workbench.html4.2.x버전
sudo sed -i "s%</head>%<style>@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding\&display=swap');</style></head>%g" /usr/lib/code-server/lib/vscode/out/vs/code/browser/workbench/workbench.html하지만 code-server는 업데이트 할 때 마다, 폴더랑 파일들의 위치가 다 바뀌어버린다.
따라서 버전 업 할때마다 그때그때 파일을 찾기 힘들 것 같으면 아래 명령어를 사용 해 보면 된다.
cd /usr/lib/code-server #code-server folder 위치
find . -name workbench.html | sudo xargs sed -i "s%</head>%<style>@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding\&display=swap');</style></head>%g"단, workbench.html의 파일 이름이 바뀌어버린다면 작동하지 않을 수도 있겠다.
- 그 다음, CSP를 업데이트 해 준다.
아래 코드를 실행 해 주면 된다.
cd /usr/lib/code-server
grep -rl "style-src 'self' 'unsafe-inline'" . | sudo xargs sed -i "s/style-src 'self' 'unsafe-inline'/style-src 'self' 'unsafe-inline' fonts.googleapis.com/g"
grep -rl "font-src 'self' blob:" . | sudo xargs sed -i "s/font-src 'self' blob:/font-src 'self' blob: fonts.gstatic.com/g"-
code-server를 재실행 해준다.
-
vscode 설정에 들어가서, 폰트를 설정 해 준다.
'Nanum Gothic Coding', monospace -
끝!
이상까지의 과정을 한 파일로 만들면 아래와 같겠다.
cd /usr/lib/code-server #code-server folder 위치
find . -name workbench.html | sudo xargs sed -i "s%</head>%<style>@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding\&display=swap');</style></head>%g"
grep -rl "style-src 'self' 'unsafe-inline'" . | sudo xargs sed -i "s/style-src 'self' 'unsafe-inline'/style-src 'self' 'unsafe-inline' fonts.googleapis.com/g"
grep -rl "font-src 'self' blob:" . | sudo xargs sed -i "s/font-src 'self' blob:/font-src 'self' blob: fonts.gstatic.com/g"
# 이후 code-server 재실행
# 이후 설정의 글꼴 부분에 'Nanum Gothic Coding', monospace 추가