중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
목차
1. 영어 폰트는 많은데… 한글 폰트는?
버블에서 다양한 폰트를 제공합니다. 모든 폰트는 구글 폰트에서 제공하는 무료 폰트입니다. 다만, 해외 서비스라 그런지 한글 폰트가 크게 존재하지 않습니다. 그나마 noto sans kr 폰트라도 있어서, 이를 주로 사용합니다.
개인적으로 noto sans kr 폰트에 만족하지만, 디자이너라면 분노를 참을 수 없습니다. 분노를 잠재우기 위해, 디자이너가 사랑하는 SUIT나 pretendard 등 더 이쁘고 잘 읽히는 폰트를 쓸 수 있는 방법이 필요합니다.
2. Custom Font 적용하기
다행히도 버블에서는 자신의 원하는 폰트를 등록해서 사용할 수 있습니다. 등록 과정이 귀찮을 뿐, 방법도 어렵지 않습니다. 지금부터 버블박스와 함께 알아보죠
참고로 커스텀 폰트 기능 공식 문서는 아래서 확인 가능합니다. 3분짜리 영상 설명도 있으니 글을 읽기 귀찮은 분들은 그대로 영상을 따라하시면 됩니다.
a. 원리 이해하기
원리를 이해해야 만족하는 저 같은 분을 위해, 폰트 적용 원리를 설명드리겠습니다. 사실 매우 쉬운데 크게 과정은 아래와 같습니다.
1.
버블 스토리지에 커스텀 폰트 파일을 저장
2.
폰트 파일을 불러와서 사용할 수 있는 css 파일을 저장
3.
버블이 css 파일을 확인시켜서 폰트를 사용
커스텀 폰트는 말 그대로 버블에 없는 폰트를 적용하는 겁니다. 그렇기에 해당 폰트가 버블의 스토리지에 있어야 합니다. 다만 저장을 하는 것과, 이를 불러와서 사용하는 것은 별개입니다. 불러올 수 있는 css 파일이 필요합니다. 마지막으로, 버블에서 css 파일을 인식시켜 저장된 폰트 파일을 불러오게 만듭니다.
앞으로 편의상, 각 파일을 폰트 파일과 css 파일이리고 부르겠습니다.
b. 폰트 파일 저장하기
마음에 드는 폰트 파일을 다운로드 받습니다. 검색해서 폰트의 tff 파일을 다운 받습니다. 이때 weight별 폰트 정보를 한 번에 지닌 variable 타입이 아니라, 각 weight 폰트가 독립적으로 존재하는 static 타입을 다운 받아야 합니다. 같은 타입의 폰트라도 weight가 다르면, 커스텀 폰트에서는 서로 다른 폰트로 인식하기 때문입니다.
버블 에디터 페이지에서 데이터 탭을 들어간 후, 파일 매니저 탭으로 이동합니다. 그리고 우측의 업로드 버튼를 클릭해 다운 받은 폰트 파일을 업로드합니다. 그러면 버블 스터리지에 폰트 파일이 저장됩니다. 업로드한 폰트 파일을 클릭하면, 저장된 파일의 url을 확인할 수 있습니다. 해당 URL을 복사합니다.
공식 문서의 영상에서는 파일 업로더 요소로 업로드하는 방식을 쓰는데 여기서 바로 업로드하는 방식을 써도 됩니다.
c. Css 파일 저장하기
vs코드 같은 코드 에디터를 실행하고, css 타입의 파일을 생성합니다. 그리고 앞서 복사한 폰트 파일의 URL을 아래 형식처럼 입력해 저장합니다.
///형식
@font-face {
font-family: %{폰트 이름}';
src: url(%{폰트 파일이 저장된 url});
}
///예시
@font-face {
font-family: 'SUIT';
src: url('https://s3.amazonaws.com/dhwidnw2848djd/SUIT.ttf');
}
CSS
복사
이렇게 완성한 CSS 파일을 동일한 방식으로 버블 스토리지에 업로드합니다. 그리고 버블에 업로드한 CSS 파일의 URL을 복사합니다.
d. 버블에게 css 파일 확인시키기
이제 설정 탭의 general 탭으로 이동합니다. 스크롤해보면 custom fonts 섹션이 있습니다. 여기서 css file path란에 앞서 복사한 css 파일 url을 입력하고, font name에 에디터에서 선택지로 보여줄 폰트 이름을 입력합니다. 그러면 등록된 폰트 이름으로 텍스트에 적용해 사용할 수 있습니다.
3. 커스텀 폰트 설정 시, 주의할 점
a. 삭제하면 안 돼요!
커스텀 폰트를 사용하기 위해서 (1) 폰트 파일과 (2) css 파일이 스토리지에 저장된 상태여야 합니다. 설정이 다 됐다고 파일 매니저 탭에서 하나로 삭제한다면, 폰트가 적용되지 않습니다. 또한, 파일을 업로드할 때마다 url이 달라져서 다시 업로드해서 설정해야 하는 번거로움을 견디셔야 합니다.
b. 무료 폰트 체크하기
폰트를 아무거나 사용하면 벌금 폭탄에 맞을 수도 있습니다. 폰트 사용 시, 해당 폰트를 상업적 목적으로 사용해도 되는지를 반드시 확인하세요!
중요 공지
“버블박스”가 “노코더스”라는 이름으로 변경됐어요
현재 사이트는 더 이상 운영하지 않으니
노코더스 사이트로 이동해주세요
버블박스가 버블을 주제로 책을 발행할 예정입니다. 출간 알림을 등록하면 추후에 안내 드릴게요!
+ 알림 신청자 중 일부에게 책을 무료로 드릴 예정입니다.
필요한 플러그인이 있다면, 버블박스에게 요청해주세요
햇갈리거나 잘 모르는 이론 및 개념이 있다면 아래에 남겨주세요.
버블 크레딧으로 더 저렴하게 시작하기
버블박스 l BubbleBox
