code-server 폰트 적용

Profile-exe·2023년 2월 18일

GCP RN code-server custom font react native 군대 사지방 폰트

IDE 설정

목록 보기

5/7

사지방에서 code-server를 이용해 코딩을 하고 있었으나, 폰트가 마음에 안들어서 바꾸고 싶었다. GCP의 인스턴스에서 ssh로 접속 후 폰트를 설치해도, docker container에 폰트를 설치해도 적용이 되지 않았다.

알고보니 code-server가 설치된 디렉터리에서 html, css 파일을 변경해야 사용 가능하다는 것을 알게 되었다. 하지만, 여러 블로그를 둘러보며 해당 파일들을 변경해도 바뀌지 않아서 너무 힘들었다...

폰트 적용을 위해 수많은 삽질을 겪고 나서 내가 적용한 방식을 기록하려 한다.

`1.` 폰트 설치

나는 웹 폰트(woff, woff2)를 적용하는 형태로 구현했다.
자신이 원하는 폰트를 위에 나온 확장자로 선택해 다운로드 받는다.

사지방에서 윈도우에 다운로드 받아도 Drag & Drop으로 code-server에 업로드할 수 있으니 굳이 터미널에서 명령어를 통해 다운로드 받고 파일을 이동시킬 필요가 없다.

내가 선호하는 폰트는 Fira Code와 JetBrains Mono다.

Google Fira Code
JetBrains Mono

`2.` 파일 업로드 및 수정

가장 중요한 부분이다. 이 파트에서 삽질을 가장 많이 했으며, 이전에 썼던 글에 있는 맨 처음 code-server에 접속한 상태에서 직접 적용해봐도 이상이 없으므로 천천히 따라오면 되겠다.

`2-1.` 폴더 열기

code-server에 접속 후 /usr/lib/code-server/src/browser/pages 해당 경로로 폴더를 열어준다.

`2-2. fonts` 폴더 생성 및 파일 업로드(`Drag & Drop`)

폴더를 생성하기 전 우선 파일 및 폴더 생성/삭제 권한을 얻어야한다.

> sudo chmod ugo+rwx -R /usr/lib/code-server/src/browser/pages

만약 이래도 생성 및 삭제가 불가능하다면 browser, src 이렇게 점점 더 높은 폴더에서 권한을 얻어보도록 하자.

편하게 sudo chmod ugo+rwx -R /usr/lib/code-server 이래도 되지만 시간이 좀 걸리고 불필요하게 파일 권한을 더 얻어서 나중에 실수로 파일을 지우게 되는 경우가 생길 수 있으니 주의가 필요하다.

이제 fonts 폴더를 생성하고 해당 폴더에 다운로드 받았던 폰트 파일들을 넣는다. 다른 사용하고 싶은 폰트들도 이와 같은 방법으로 적용하면 되겠다.

갑자기 테마 색상이 어둡게 바뀐 이유는 JetBrains Mono 폰트를 적용하고 나서 새로 업로드 했기 때문이다.

`2-3. fonts.css` 생성 및 수정

fonts.css 파일을 생성 후 다음 내용을 작성한다.

주의할 점은 fonts.css는 fonts 폴더 내부에 있는 것이 아니다
fonts 폴더와 fonts.css파일은 pages라는 같은 폴더 내에 위치한다.

@font-face {
  font-family: 'JetBrainsMono';
  src: url('./fonts/JetBrainsMono-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrainsMono';
  src: url('./fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrainsMono';
  src: url('./fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrainsMono';
  src: url('./fonts/JetBrainsMono-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrainsMono';
  src: url('./fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

@font-face document

@font-face에 대해 알아보려면 위 링크를 참고해도 좋다.

`2-4. login.html` 수정

편집기 좌측 파일 탐색기를 보면 login.html 파일이 있을 것이다.

파일을 열고 <head> 태그 맨 마지막에 아래 코드를 입력한다.

<link rel="stylesheet" type="text/css" href="{{CS_STATIC_BASE}}/src/browser/pages/fonts.css">

이러면 login.html의 모습은 다음과 같다. ...은 생략된 내용들이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <link rel="stylesheet" type="text/css" href="{{CS_STATIC_BASE}}/src/browser/pages/fonts.css">
  </head>
  <body>
    ...
  </body>
</html>