본문으로 건너뛰기

Docusaurus 폰트 변경하기 - 웹폰트 적용

· 약 7분
Braun Park
Braun Park
Curious Developer

이전에 nuxt로 블로그를 만들었을 때는 관리하기가 어려워서 꺼려졌는데, Docusaurus로 만든 이 블로그는 그래도 전 블로그 보다는 열심히 포스팅하고 있습니다. 아직은 Docusaurus가 익숙하지 않아 이것저것 만져보느라 포스팅보다는 그 쪽에 시간을 많이 쓴 것 같습니다.

이것저것 만져보다가 폰트를 한번 변경해봤습니다. 사실 기본 폰트도 나쁘지 않았지만, 약간 개발자스러운(?) 폰트를 적용해보고 싶었습니다. 가독성이 조금 떨어지는 것 같기도 하지만, 우선은 제 블로그가 지금은 사람을 끌어 모은다기보다는 기록용으로 사용되고 있기 때문에 이번에 바꾼 폰트로 쭉 적용해보려고 합니다. 나중에 제 블로그를 찾는 사람들이 많아지면 그 때 한번 다시 고민하겠습니다. 아, 지금 이 포스트 작성일 기준으로는 픽셀 느낌의 폰트가 적용되어 있습니다.

웹페이지에 폰트를 적용하는 방법​

웹페이지를 만들 때, 폰트를 적용하는 방법은 크게 두 가지가 있습니다.

  1. 웹 폰트를 링크로 연결하여 가져오기
  2. 직접 프로젝트 내에 import 하기

이렇게 두 가지 방법이 있는데요, 결론부터 말씀드리면 저는 첫 번째 방식으로 하였고 이 포스팅 또한 첫 번째 방식을 기준으로 설명합니다. 첫 번째 방식으로 선택한 기준으로는 저희 팀 프론트엔드 개발자 분에게 여쭤봤을 때 이 방식이 더 효율적이라는 결론을 얻었기 때문입니다.

프로젝트 내에 폰트 파일(.woff, .woff2과 같은 파일)을 import 시키는 게 더 빠르지 않을까 싶었는데, 오히려 웹폰트를 바로 가지고 오는게 더 빠를 수 있다고 합니다. 물론 엄청나게 큰 차이는 발생하지 않겠지만 말이죠.

폰트 선택하기​

어떤 폰트를 선택해야할까요? 우선 폰트들은 눈누(링크)에 들어가시면 정말 많은 폰트들을 확인하실 수 있습니다. 이 블로그는 포스팅 작성일(2024. 09. 22) 기준 둥근모꼴+이라는 폰트가 적용되어 있습니다. 저는 개발자스러운 픽셀체를 적용하고 싶었거든요.

근데 주의하셔야 할 게 있습니다. 바로 폰트에도 저작권이 있다는 것인데요, 잘못 사용했다간 큰일 날 수 있습니다. 정확히 말씀드리면 폰트 자체에 있다기보다는 디지털화 된 파일에 있다는 것입니다. 저희는 IT에서 사용하기 때문에 어쨌든 저작권의 영향을 받습니다. 그래서 (중요)폰트를 적용하시기 전에 폰트 상세 페이지 내의 저작권 관련 내용을 꼭 확인해주세요.

저작권

제가 지금 적용한 둥근모꼴+에는 저작권 문제가 없어서 적용했습니다.

Docusaurus에 폰트 적용하기​

폰트를 선택했다면, 이제 Docusaurus에 적용해봐야겠죠? 아마 기본적으로 src/custom.css 파일이 있으실텐데요. 이 파일 내에서 적용하면 됩니다.

custom.css 파일이 없는 경우​

파일이 없는 경우, 동일한 경로에 만들어주시면 됩니다. 그리고 docusaurus.config.ts 파일 내에 있는 presets 하위에 넣어주시면 됩니다.

// ...
 presets: [
    theme: {
          customCss: './src/css/custom.css',
        },
]

그러면 이제 custom.css를 수정해보겠습니다. 눈누에서 선택한 폰트의 상세페이지를 보면, 웹폰트로 사용 칸이 있습니다. 해당 코드를 복사해서 custom.css에 적용합니다.

@font-face {
  font-family: 'DungGeunMo';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body, h1, h2, h3, h4, h5, h6, p, a, li, blockquote, span {
  font-family: 'DungGeunMo', sans-serif;
}

이렇게 적용만 해주면 끝입니다. 참 쉽죠?

마치며​

제가 원하는 대로 픽셀체의 둥근모꼴+로 적용을 하긴 했지만, 다른 사람들이 볼 때는 어떨 지 모르겠습니다. 가독성이 살짝 떨어지는 것 같기도 하지만, 그건 제 블로그를 방문하는 사람들이 늘어나면 고민해도 되겠죠? 아니면 전에 적용한 GA 데이터를 봤을 때 머무르는 시간이 짧다면, 그것 또한 폰트를 바꿔야 하는 이유가 될 수 있겠네요. 열심히 한번 지켜보겠습니다.