Bubble.io에서 커스텀 폰트 적용하는 방법

Pretendard를 예시로 초보자도 쉽게 따라 할 수 있게 알려드려요!

Bubble.io로 웹사이트나 웹 서비스를 제작하면서 기본 폰트만 사용하는 건 아쉽지 않으셨나요? 커스텀 폰트를 적용하면 디자인의 완성도를 한 단계 업그레이드할 수 있습니다! 이번 글에서는 Pretendard 폰트를 예시로 들어 Bubble.io에서 커스텀 폰트를 설정하는 방법을 쉽고 자세히 알려드릴게요.

1. 폰트 파일 준비

Bubble.io에서 커스텀 폰트를 적용하려면 폰트 파일이 필요합니다. Pretendard를 사용한다면 공식 웹사이트나 오픈 소스 리소스에서 파일을 다운로드하세요.

프리텐다드 다운로드 페이지

최적의 파일 형식은 아래와 같아요.

woff2: 최신 브라우저에서 최적화된 형식으로, 가장 추천하는 형식

woff: 오래된 브라우저에서도 지원

ttf: 비교적 무겁고 덜 최적화된 형식 (가능하면 woff, woff2 추천)

2. 폰트 파일 업로드하기  

Bubble.io에서 Data → File manager로 이동합니다.

Upload 버튼을 눌러 다운로드한 폰트 파일을 업로드하세요.

업로드된 폰트 파일명에서 우클릭 → 링크 주소 복사를 선택합니다.

폰트 파일 업로드하는 방법

3. CSS 파일 작성하기

CSS 파일은 브라우저가 폰트를 인식할 수 있도록 도와주는 중요한 역할을 합니다. 아래 템플릿을 복사해 텍스트 편집기(Visual Studio Code)에서 작성해 보세요.

* 브런치 글은 복사가 안 된다고 해서 파일 첨부합니다!*

pretendard.txt

---

@font-face { 

    font-family: 'Pretendard';

    font-style: normal;

    font-weight: 100; /* Thin */

    src: url('') format('woff2');

}

@font-face { 

    font-family: 'Pretendard';

    font-style: normal;

    font-weight: 200; /* Extra Light */

    src: url('') format('woff2');

}

/* 나머지 두께도 같은 방식으로 추가 */

---

폰트 파일 링크 url('')에는 2번에서 복사한 링크를 붙여넣으세요. woff2가 아닌 다른 형식을 사용하신다면, format('')에 폰트 파일 형식을 넣어주세요.

템플릿을 이용해 CSS 파일을 작성한 후 저장합니다. 파일명은 자유롭게 지정하세요(예: custom-font.css)

이 템플릿은 Pretendard 기준으로 작성되었습니다.
다른 폰트를 사용할 경우, font-family 값에 해당 폰트의 이름을 입력해야 합니다.

예: Pretendard 대신 MyCustomFont를 사용한다면, 아래와 같이 작성해야 합니다.

font-family: 'MyCustomFont';

4. CSS 파일 업로드  

작성한 CSS 파일을 Bubble File manager에 업로드합니다.

업로드한 CSS 파일명을 우클릭 → 링크 주소 복사합니다.

CSS 파일 업로드 하는 방법

5. Custom Fonts 등록  

Settings → General → Custom Fonts로 이동합니다.

Font name: CSS 파일의 font-family 값과 동일하게 입력합니다. (예: Pretendard)

CSS file path: 4번에서 복사한 CSS 파일 링크를 붙여넣습니다.

Add font를 눌러 저장합니다.

커스텀 폰트 등록하는 방법

6. App Font로 설정  

Styles → Style variables → Fonts로 이동합니다.

App Font를 방금 등록한 폰트로 설정합니다. (App Font로 설정해야 텍스트 굵기 조절이 가능합니다.)

앱 폰트 등록하는 방법

7. 적용 확인하기

텍스트 요소를 추가하고, 새로 등록한 폰트를 선택하세요. 굵기와 스타일을 변경하며 제대로 적용되는지 확인해 보세요!

폰트 적용 확인

마무리하며

Bubble.io에서 커스텀 폰트를 적용하면 디자인 완성도와 브랜딩 효과를 높일 수 있습니다. 이번 글에서는 Pretendard를 예시로 적용 과정을 설명했지만, 다른 폰트도 동일한 방식으로 등록할 수 있어요.

하지만, 폰트 적용뿐만 아니라, Figma 디자인을 그대로 웹사이트로 구현하는 방법도 궁금하지 않으세요?

무료 강의 보기: 코드 없이 Figma 디자인 그대로! Bubble.io로 웹사이트 만들기

앞으로도 Bubble.io 관련 유용한 정보와 꿀팁을 계속 공유할 예정이니, 많은 관심 부탁드립니다.

Bubble.io에 대해 궁금한 점이 있다면?

댓글로 남겨주세요! 여러분의 프로젝트가 돋보일 수 있도록 도와드릴게요.