@despenser08

미스키부터 커스터마이징을 시작해 봅시다! 아직 마스토돈은 조사가 필요해요... 오늘 커스터마이징 해볼 것은 폰트입니다. 솔직히 미스키를 업데이트하고 나서 폰트가... 제 취향은 아닙니다. 그러니 이번에 [Pretendard](https://github.com/orioncactus/pretendard)로 빨리 바꿔봅시다. 간단해요! **1. 먼저 미스키 소스 디렉토리로 이동합니다.** 설치 방법과 환경에 따라 다르기 때문에 이 글에서는 정확한 방법을 언급하진 않겠습니다. **2. 프론트엔드 코드 수정** 먼저 `packages/frontend/src/`에 있는 `style.scss`를 수정해 봅시다: ```scss // Pretendard를 불러옵니다 @import "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-jp-dynamic-subset.css"; @import "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css"; // ... // html 부분에 있는 font-family에 Pretendard를 추가해 줍시다. html { // ... font-family: "Pretendard JP Variable", "Pretendard Variable", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; // ... ``` * `pretendard` & `pretendard-jp` 패키지를 설치하고 import 할 수는 있지만 일단 한 파일만 수정하게만 만들었습니다. **3. 백엔드 코드 수정** 백엔드에선 2개의 파일을 수정합니다! 에러 페이지나 등등을 위해서 수정합니다. 먼저 `packages/backend/src/server/web/`에 접근합니다. `bios.css` 파일을 먼저 수정해 봅시다: ```css // Pretendard를 불러옵니다 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css"); @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-jp-dynamic-subset.css"); // * 부분에 있는 font-family에 Pretendard를 추가해 줍시다. * { font-family: "Pretendard JP Variable", "Pretendard Variable", Fira code, Fira Mono, Consolas, Menlo, Courier, monospace; } ``` 그다음, `boot.js` 210줄쯤에 있는 `addStyle` 함수를 수정합시다: ```js addStyle(` @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-dynamic-subset.css"); @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/variable/pretendardvariable-jp-dynamic-subset.css"); * { font-family: "Pretendard JP Variable", "Pretendard Variable", BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif; } // ... ``` * 추가로, /cli 페이지의 `cli.css`가 있지만... 굳이 수정 안 해도 되죠? **모든 과정이 완료되었습니다!** 빌드하고 변경을 확인해 봅시다! 저도 아직 미스키에 대해 미숙한 점과 웹 개발에 대한 지식이 많지 않기 때문에 좀 더 나은 방법이나 틀린 부분이 있으면 알려주세요! 참고: [:klapy_noti: Misskey.lapy GitHub](https://github.com/ltlapy/misskey/tree/klapy), [:stella_r2: stella.place GitHub](https://github.com/libnare/mk-castella) - 감사합니다 서버장분들 (📎1)

k.lapy.link · 체리픽.라피 🥝