이번 글은, 앞의 다른 내용들보다도 가장 쉽고 간단한 것을 설명하고 있으니 편안한 마음으로 읽어주세요. 커스텀시트에 화려한 글꼴을 적용하는 방법은 크게 3가지 정도가 있습니다. 이것을 웹폰트라고 하는데, 폰트 파일의 확장자에 따라 로딩되는 시간이 느려집니다. 하지만 가장 유의할 것은, 커스텀시트에 html/css/js(번역)을 넣을 수는 있지만 별도의 파일을 업로드하는 것은 불가능하다는 점입니다. 이를 해결하기 위해 외부에 저장된 폰트 파일을 임베드하여 가져오는 방법을 알아보겠습니다.
1. 구글 웹폰트 @import url()
먼저 이 방법은 roll20 위키에서도 공식적으로 권장하는 방법입니다. 만든 커스텀시트를 나중에 무료 계정도 사용 가능하도록 공개 등재할 때에도 적용이 가능합니다. 단, 한국어 폰트의 가짓수가 그리 많지는 않습니다. 먼저 구글 폰트(https://fonts.google.com/)에 들어가보겠습니다. 이곳에 있는 폰트 중 특별히 원하는 글꼴의 이름을 알고 있다면 search fonts에서 검색해도 되지만, 그 바로 아래 칸의 categories의 오른쪽에는 language를 선택하는 것이 가능합니다. 이것을 Korean으로 설정하면 2022년 11월 기준, 31개의 글꼴이 있는 것을 확인할 수 있습니다. 그 중에 하나 원하는 것을 골라서 눌러 봅시다.그러면, 큰 크기의 미리보기 텍스트에 적용되었을 때 어떻게 보여지는지 아래에 더 작은 크기의 미리보기 텍스트의 경우들을 보여주고 있을 것입니다. 더 아래로 스크롤을 내리면, Styles이라고 하는 부분의 미리보기 칸을 클릭하여 임의의 글자를 입력하여 테스트하는 것이 가능합니다. 이 오른쪽의 Select Regular 버튼을 눌러주세요.
구글폰트 회색 상자에서 복사
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
</style>커스텀시트의 CSS에 붙여넣기
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
2. 눈누 웹폰트 @font-face
앞서 설명한 구글 폰트에는 한국어 폰트가 많지 않아 선택의 폭이 좁습니다. 그래서 저는 눈누(https://noonnu.cc/)에 있는 폰트를 즐겨 사용합니다. roll20에 등재할 것이 아닌 개인용 커스텀시트라면 이것저것 고려할 거 없이 편하게 사용할 수 있어 좋습니다. 원하는 폰트를 하나 골라서 웹폰트로 사용의 복사 버튼을 누르면 끝입니다. 간단하죠?
3. roll20의 특수문자 폰트
롤20에서 캐릭터시트를 사용하다 보면, 20면체나 10면체 형태의 주사위 그림이 굴림 버튼에 많이 사용되는 것을 볼 수 있습니다. 그 외에도 페이트 주사위 등 다양한 종류의 주사위와 아이콘에 대응하는 시스템 특수문자를 쓸 수 있는 글꼴 파일이 roll20에 업로드되어 있어, 그것을 바로 사용할 수 있습니다. 이것은 따로 임베드하지 않아도, html의 원하는 부분에 <span style="font-family: Pictos">H</span> 라고 쓰면, 집 모양의 아이콘으로 보이게 되는 것입니다. 단, roll20 모바일 앱에서는 보이지 않고 원래의 글자인 H로 보이게 됩니다. 전체 아이콘 목록은 https://wiki.roll20.net/Character_Sheet_Development/CSS#Icon_Fonts에서 확인할 수 있습니다.불러온 글꼴을 사용하기
방금 설명한 roll20의 아이콘 폰트처럼, html에서 적용하고 싶은 태그에 직접 style을 넣어서 font-family를 지정할 수 있습니다. 하지만 구간별로 적용하고 싶은 폰트가 다르고 그 양이 많을 경우, html에는 각각의 class를 지정하고 다시 css에서 선택자로 서식을 지정하면 간편하게 사용할 수 있습니다. 예를 들어, 아까의 구글 폰트로 Black Han Sans라는 글꼴을 임베드했을 경우 다음과 같이 적용하면 되겠지요.커스텀시트의 HTML
<div class="sheet-favorite">
<div>토끼</div><div>당근</div>
<div>고양이</div><div>생선</div>
<div>강아지</div><div>뼈다귀</div>
</div>
커스텀시트의 CSS
.sheet-favorite {
display: grid;
grid-template-columns: 1fr 1fr;
}
.sheet-favorite div:nth-child(odd) {
font-family: "Black Han Sans";
}
결과
토끼
당근
고양이
생선
강아지
뼈다귀
마지막으로, 몇 가지 주의사항이 있습니다. roll20에서는 공식 모바일 앱에서 캐릭터 시트를 지원(오프탁에서도 roll20의 온라인 시트를 사용해서 간편하게 세션을 할 수 있도록)하려고 하는데, 위에 서술한대로 아이콘폰트는 모바일 앱에서 제대로 불러와지지 않습니다. 다른 구글 폰트와 눈누 폰트는 제대로 적용되는 것을 확인했습니다만, 여러가지 불안정성을 이유로 roll20에서는 외부 폰트의 사용을 권장하지는 않습니다. 또한 같은 이름의 폰트를 다양한 굵기로 적용하는 것은 어려우나, 각각의 굵기를 서로 다른 이름의 폰트로 적용하는 것은 가능합니다. 이렇게 불러와진 글꼴은 그 시트가 적용된 방 안에서만 사용 가능하기 때문에, 별도의 매크로(롤꾸) 코드로도 할 수 있습니다.
댓글 없음:
댓글 쓰기
본문과 관련이 적은 댓글은 삭제될 수 있습니다.