@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 · 체리픽.라피 🥝