콘텐츠로 건너뛰기

HubSpot에서 글꼴 사용

마지막 업데이트 날짜: 2월 12, 2025

명시된 경우를 제외하고 다음 구독 중 어느 것에서나 사용할 수 있습니다.

모든 제품 및 플랜

HubSpot에서 콘텐츠에 사용할 수 있는 글꼴은 콘텐츠 유형 및 글꼴 유형에 따라 다릅니다. 특정 기본 글꼴은 모든 콘텐츠 편집기에서 사용할 수 있지만 웹 글꼴(예: Google 글꼴) 및 사용자 정의 글꼴에는 아래에 설명된 추가 제한 사항이 있습니다:

콘텐츠 유형 글꼴 유형
기본 글꼴 웹 글꼴

사용자 지정 글꼴

페이지 - 테마 템플릿 테마 설정 및 스타일시트에서 사용 가능
페이지 - 코딩된 템플릿 스타일시트 또는 사용자 지정 모듈을 통해 사용 가능 스타일시트를 통해 사용 가능
블로그 스타일시트 또는 사용자 지정 모듈을 통해 사용 가능
이메일 끌어서 놓기 이메일 편집기에서 사용할 수 없는 일부 기본 글꼴 사용자 지정 코딩된 이메일 템플릿에서만 사용 가능하며, 대부분의 이메일 클라이언트에서는 지원되지 않습니다. 사용자 지정 코딩된 이메일 템플릿에서만 사용 가능하며, 대부분의 이메일 클라이언트에서는 지원되지 않습니다.
지식 기반 템플릿 편집기의 디자인 탭에서 사용 가능 사용 불가
사용자 지정 모듈 이메일에 사용되지 않는 사용자 지정 모듈에 사용 가능 이메일에 사용되지 않는 사용자 지정 모듈에 사용 가능
CTA(레거시)
CTA

참고: 모든 계정에서 모든 콘텐츠 유형을 사용할 수 있는 것은 아닙니다. HubSpot 계정에서 구독에 사용할 수 있는 콘텐츠 유형은 제품 및 서비스 카탈로그에서 확인할 수 있습니다.

기본 글꼴 사용

기본 글꼴은 모든 유형의 콘텐츠에 사용할 수 있으며 대부분의 플랫폼과 디바이스에서 로드되도록 설계되었습니다.

  • 콘텐츠로 이동합니다:

    • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
    • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
    • 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
    • 지식 베이스: HubSpot 계정에서 콘텐츠 > 기술 자료로 이동합니다.
    • 이메일: HubSpot 계정에서 마케팅 > 마케팅 이메일로 이동합니다.
  • 콘텐츠의 이름을 클릭합니다.
  • 콘텐츠 편집기에서 서식 있는 텍스트 모듈을 클릭한 다음 편집하려는 텍스트를 강조 표시합니다.
  • 서식 있는 텍스트 도구 모음에서 글꼴 드롭다운 메뉴를 클릭하고 글꼴을 선택합니다. 서식 있는 텍스트 모듈에서 사용할 수 있는 글꼴은 다음과 같습니다:
    • 안달레 모노*

    • Arial

    • Book Antiqua*

    • Courier New

    • Georgia

    • 헬베티카

    • Impact*

    • Lato**
    • 메리웨더**
    • 모나코*
    • 기호*

    • 타호마

    • 터미널*

    • 타임즈 뉴 로마

    • 트레뷰셋 MS

    • Verdana

*드래그 앤 드롭 이메일 편집기에서는 사용할 수 없습니다.

**드래그 앤 드롭 이메일 편집기에서 웹 글꼴로만 사용할 수 있습니다.

웹 글꼴 사용

웹 글꼴은 시작용 템플릿 및 테마를 사용하는 페이지와 지식창고 문서 및 사용자 지정 모듈의 콘텐츠 편집기에서 기본적으로 사용할 수 있습니다.

개발자인 경우 글꼴 필드를 사용하여 테마 및 사용자 정의 모듈에 웹 글꼴을 추가할 수도 있습니다. 이러한 방식으로 사용하는 경우 웹 글꼴은 타사 서비스에서 로드되지 않고 HubSpot에서 콘텐츠 도메인에 직접 로드됩니다.

참고: 서식 있는 텍스트 편집기의 글꼴 드롭다운 메뉴에서는 웹 글꼴을 선택할 수 없습니다.

글꼴 가져오기 코드를 복사하여 콘텐츠의 스타일시트에 붙여넣은 다음 CSS를 통해 글꼴을 적용하여 Google 글꼴과 같은 타사 서비스를 사용할 수도 있습니다:

  • fonts.google.com으로 이동합니다.
  • 검색창에 글꼴 이름을 입력합니다.
  • 글꼴 이름을 클릭하면 가져올 수 있는 스타일 목록을 볼 수 있습니다.
  • 가져오려는 각 스타일 옆의 + 이 스타일 선택을 클릭합니다.
  • 오른쪽 패널의 웹에서 사용 섹션에서 @ 가져오기를 선택합니다.
  • 글꼴의 코드를 복사합니다:
    • 웹에서 사용 섹션에서 <스타일> 태그 없이 @import 코드를 복사합니다.
    • 패밀리 지정을 위한 CSS 규칙 필드에서 CSS 규칙 설정 코드를 복사합니다.

Google 글꼴에서 코드를 받으면 HubSpot 콘텐츠에 글꼴을 추가할 수 있습니다:

스타일시트에서 Google 글꼴 사용

  • Google 글꼴에서 글꼴의 @import 코드를 복사합니다.
  • HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  • 파인더에서 콘텐츠에 사용된 스타일시트를 엽니다.
  • 가져 오기 코드를 스타일시트의 1줄에 붙여 넣습니다.
  • 스타일시트의 적절한 선택기에 CSS 규칙을 설정하는 코드를 추가합니다.
  • 오른쪽 상단에서 변경 사항 게시를 클릭하여 변경 사항을 실시간으로 적용합니다.

맞춤 코딩된 이메일 템플릿에서 Google 글꼴 사용

Google 글꼴은 Apple Mail 및 일부 다른 이메일 클라이언트에서 지원되지만, 광범위한 지원은 제한적이며 대부분의 인기 있는 이메일 클라이언트는 기본 웹 글꼴만 지원합니다. 클래식 이메일 편집기에서 사용되는 기본 글꼴을 선택하는 방법에 대해 자세히 알아보세요.
사용자 지정 코딩 이메일 템플릿은 마케팅 허브 프로페셔널 또는 기업용을 구독하는 계정에서만 사용할 수 있습니다.
맞춤 코딩된 이메일 템플릿에 Google 글꼴을 추가하려면 다음과 같이 하세요:
  • Google 글꼴에서 글꼴의 @import 코드를 복사합니다.
  • HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  • 파인더에서 사용자 지정 코딩된 이메일 템플릿을 엽니다.
  • 템플릿의<head> 섹션에서 <style>....</style> 태그 사이에 @import 코드를 붙여넣습니다.
  • 이메일 본문 코드에서 인라인 스타일링으로 사용자 지정 글꼴을 추가합니다.
  • 오른쪽 상단에서 변경 사항 게시를 클릭하여 변경 사항을 실시간으로 적용합니다.

CTA에 Google 글꼴 사용(레거시)

  • 해당 글꼴에 대한 CSS 규칙을 설정하기 위해 Google의 코드를 복사합니다.
  • HubSpot 계정에서 마케팅 > CTA로 이동합니다.
  • CTA 위로 마우스를 가져간 다음 작업 > 편집을 클릭합니다.
  • 오른쪽 패널에서 고급 옵션을 클릭합니다.
  • 텍스트 상자에 해당 글꼴에 대한 CSS 규칙을 설정하는 Google의 코드를 붙여넣습니다.
  • 오른쪽 하단에서 다음을 클릭합니다. 그런 다음 저장을 클릭합니다.

양식에 Google 글꼴 사용

  • HubSpot 계정에서 마케팅 > 양식으로 이동합니다.
  • 양식 이름 위로 마우스를 가져가 작업 > 양식 편집 또는 새 양식 만들기를 클릭합니다.
  • 양식 편집기에서 스타일 및 미리 보기 탭을 클릭합니다.
  • 왼쪽 사이드바 메뉴에서 스타일 섹션을 클릭합니다.
  • 텍스트 섹션에서 글꼴 패밀리 드롭다운 메뉴를 클릭하고 Google 글꼴을 선택합니다.
  • 오른쪽 상단에서 업데이트 또는 게시를 클릭하여 변경 사항을 실시간으로 적용합니다.

사용자 정의 모듈에서 Google 글꼴 사용

참고: 이메일 템플릿에 사용되는 사용자 지정 모듈에는 Google 글꼴을 사용할 수 없습니다.


  • HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.

  • 오른쪽 상단에서 변경 사항 게시를 클릭하여 변경 사항을 실시간으로 적용합니다.
  • 콘텐츠로 이동합니다:

    • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
    • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
    • 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
  • 사용자 정의 모듈을 사용하는 콘텐츠의 이름을 클릭합니다.
  • 콘텐츠 편집기에서 사용자 정의 모듈을 클릭합니다.
  • 사이드바 편집기에서 글꼴 필드 드롭다운 메뉴를 클릭하고 Google 글꼴을 선택합니다.

사용자 지정 글꼴 사용

표준 웹 글꼴을 사용하거나 Google 글꼴과 같은 글꼴 라이브러리를 사용하는 대신 글꼴 파일을 업로드한 다음 테마에서 사용하거나 스타일시트에서 참조할 수 있습니다.

테마에서 사용자 정의 글꼴 사용

테마 편집기에서 사용자 정의 글꼴을 업로드한 다음 페이지와 글에서 해당 글꼴을 사용할 수 있습니다. 글꼴 파일은 다음 형식이 지원됩니다: ttf, otf, woff.

사용자 지정 글꼴 업로드

  • 콘텐츠로 이동합니다:

    • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
    • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
    • 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
  • 콘텐츠의 이름을 클릭합니다.
  • 콘텐츠 편집기에서 편집 메뉴를 클릭하고 테마: [테마 이름]을 선택합니다.
  • 왼쪽 사이드바 메뉴에서 글꼴 드롭다운 메뉴를 클릭하고 사용자 정의 글꼴 업로드를 선택합니다.
  • 오른쪽 패널의 글꼴 이름 필드에 글꼴의 레이블을 입력합니다.
  • 글꼴 파일 선택을 클릭하고 하나 이상의 글꼴 파일을 선택한 후 다음을 클릭합니다.

  • 글꼴 스타일 1 드롭다운 메뉴를 클릭하고 글꼴 파일에 사용 중인 스타일을 선택합니다. 각 스타일은 별도의 글꼴 파일을 사용해야 합니다.
  • 글꼴 스타일을 추가하려면 + 다른 글꼴 스타일 추가를 클릭한 다음 글꼴 스타일을 추가합니다. 업로드한 각 글꼴 파일에는 연결된 스타일이 하나 이상 있어야 합니다.
  • 적용 가능한 글꼴 스타일을 모두 추가했으면 완료를 클릭합니다.

사용자 지정 글꼴 편집

테마 편집기에서 사용자 정의 글꼴을 업로드한 후에는 추가 글꼴을 업로드하거나, 추가 글꼴 스타일로 기존 글꼴을 사용자 정의하거나, 글꼴을 삭제할 수 있습니다.

  • 콘텐츠로 이동합니다:

    • 웹사이트 페이지: HubSpot 계정에서 콘텐츠 > 웹사이트 페이지로 이동합니다.
    • 랜딩 페이지: HubSpot 계정에서 콘텐츠 > 랜딩 페이지로 이동합니다.
    • 블로그HubSpot 계정에서 콘텐츠 > 블로그로 이동합니다.
  • 콘텐츠의 이름을 클릭합니다.
  • 콘텐츠 편집기에서 편집 메뉴를 클릭하고 테마: [테마 이름]을 선택합니다.
  • 왼쪽 사이드바 메뉴에서 글꼴 섹션을 클릭하여 확장합니다.
  • 글꼴 드롭다운 메뉴를 클릭하고사용자 정의 글꼴 관리를 선택합니다.
  • 새 글꼴을 추가하려면 대화 상자에서 사용자 지정 글꼴 추가를 클릭합니다.
  • 글꼴을 편집하려면 다음과 같이 하세요:
    • 대화 상자에서 글꼴 옆의 작업 드롭다운 메뉴를 클릭하고 수정을 선택합니다 .
    • 글꼴 이름을 변경하려면 글꼴 이름 옆의 수정을 클릭한 다음 새 글꼴 이름을 입력합니다.
    • 글꼴 스타일을 추가하려면 다른 글꼴 스타일 추가를 클릭한 다음 글꼴 스타일 드롭다운 메뉴를 클릭하고 스타일을 선택합니다. 업로드를 클릭한 다음 글꼴 파일을 업로드합니다.
    • 글꼴 스타일을 삭제하려면 글꼴 스타일 옆의 deletededel 삭제 아이콘을 클릭합니다. 다른 글꼴 스타일이 나열되어 있지 않으면 글꼴 스타일을 삭제할 수 없습니다.
    • 저장을 클릭합니다.
  • 글꼴을 삭제하려면 대화 상자에서 작업 드롭다운 메뉴를 클릭하고 삭제를 선택합니다.

참고: 글꼴을 삭제하면 모든 드롭다운 메뉴에서 글꼴이 제거되지만 파일 도구에서 삭제할 때까지 글꼴 파일은 남아 있습니다.


  • 글꼴 편집이 끝나면 완료를 클릭합니다.

스타일시트에서 사용자 정의 글꼴 사용

표준 웹 글꼴을 사용하거나 Google 글꼴과 같은 글꼴 라이브러리를 사용하는 대신 파일 도구에서 글꼴 파일을 호스팅한 다음 스타일시트에서 참조할 수 있습니다.

참고: 사용자 정의 글꼴은 디자인 매니저에 액세스할 수 있는 계정에서만 사용할 수 있으며 CSS를 사용하여 적용해야 합니다. 사용자 정의 글꼴을 추가해도 콘텐츠 편집기의 스타일링 드롭다운 메뉴에 글꼴이 추가되지는 않습니다.

콘텐츠에 글꼴을 사용하려면 글꼴의 파일을 파일 도구에 업로드하세요. 모든 브라우저에서 글꼴이 로드되도록 하려면 글꼴의 .woff, .ttf 및 .eot 버전 이상을 업로드하는 것이 좋습니다. Font Squirrel의 변환기 도구에서 전문가 모드를 사용하여 추가 파일 형식을 생성할 수 있습니다.

  • HubSpot 계정에서 라이브러리 > 파일로 이동합니다.
  • 파일 업로드를 클릭합니다.
  • 컴퓨터의 하드 드라이브에서 글꼴 파일을 선택한 다음 열기를 클릭합니다.
  • 업로드한 글꼴 파일의 이름을 클릭합니다.
  • 오른쪽 패널에서 URL 복사를 클릭하여 파일이 호스팅되는 URL을 복사합니다. 각 파일 형식의 글꼴에 대한 URL이 필요합니다.

스타일시트에서 사용자 정의 글꼴 사용

파일 도구에 사용자 정의 글꼴을 추가한 후에는 스타일시트에서 참조할 수 있습니다. 각 글꼴 스타일(이탤릭체, 굵게 등)에는 별도의 @font-face 규칙이 필요합니다. HubSpot에서 스타일시트로 작업하는 방법에 대해 자세히 알아보세요.

  • HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  • 파인더에서 콘텐츠에 사용된 스타일시트를 엽니다.
  • 각 글꼴 스타일에 대해:
    • 스타일시트 상단에 다음 코드를 붙여넣습니다:
@font-face { font-family: 'Your Font Name'; src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}
    • 글꼴 이름을 글꼴 이름으로 바꿉니다.
    • your_font_file.xxx? 를 파일 도구의 URL로 바꿉니다. 각 파일 형식에 대해 이 과정을 반복합니다.
  • 사용자 정의 글꼴을 적용하려면 font-family 속성을 사용하여 CSS 규칙을 만듭니다.
  • 오른쪽 상단에서 업데이트 또는 게시를 클릭하여 변경 사항을 실시간으로 적용합니다.

사용자 지정 코딩된 이메일 템플릿에서 사용자 지정 글꼴 사용

사용자 정의 글꼴은 대부분의 인기 있는 이메일 클라이언트에서 지원되지 않습니다. 독자에게 일관된 경험을 제공하려면 이메일에 기본 웹 글꼴을 사용하는 것이 좋습니다. 그러나 사용자 정의 코딩된 이메일 템플릿에 사용자 정의 글꼴을 추가하려면 파일 도구에 사용자 정의 글꼴을 추가한 후에 추가할 수 있습니다.

  • HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  • 파인더에서 사용자 지정 코딩된 이메일 템플릿을 엽니다.
  • 각 글꼴 스타일에 대해:
    • 템플릿의 <헤드> 섹션에서 <스타일>....</스타일> 태그 사이에 이 코드를 붙여넣습니다:
@font-face { font-family: 'Your Font Name'; src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}
    • 글꼴 이름을 글꼴 이름으로 바꿉니다.
    • your_font_file.xxx? 를 파일 도구의 URL로 바꿉니다. 각 파일 형식에 대해 이 과정을 반복합니다.
  • 이메일 본문 코드에서 인라인 스타일링으로 사용자 지정 글꼴을 추가합니다.
  • 오른쪽 상단에서 업데이트 또는 게시를 클릭하여 변경 사항을 실시간으로 적용합니다.

CTA에 사용자 지정 글꼴 사용

테마에 사용자 정의 글꼴을 추가한 후 CTA와 함께 사용할 수 있습니다:

  • HubSpot 계정에서 마케팅 > CTA로 이동합니다.
  • 왼쪽 상단에서 드롭다운 메뉴를 클릭하고 CTA를 선택합니다.
  • CTA 위로 마우스를 가져간 다음 작업 > 편집을 클릭합니다.
  • CTA 에디터의 왼쪽 패널에서 디자인 탭을 클릭합니다.
  • 스타일 섹션을 클릭하여 확장합니다.
  • 기본 글꼴 드롭다운 메뉴를 클릭하고 사용자 지정 글꼴을 선택합니다.
  • CTA 생성을 계속 진행합니다.

CTA에 사용자 지정 글꼴 사용(레거시)

CTA와 마찬가지로 사용자 지정 양식 파일을 업로드한 후 레거시 CTA와 함께 사용할 수 있습니다:

  • HubSpot 계정에서 마케팅 > CTA로 이동합니다.
  • CTA 위로 마우스를 가져간 다음 작업 > 편집을 클릭합니다.
  • 오른쪽 패널에서 고급 옵션을 클릭합니다.
  • 텍스트 상자에 이 코드를 붙여넣습니다:

font-family: 'Your Font Name';

  • 글꼴 이름을 글꼴 이름으로 바꿉니다.
  • 오른쪽 하단에서 다음을 클릭합니다. 그런 다음 저장을 클릭합니다.

사용자 정의 모듈에서 사용자 정의 글꼴 사용

파일 도구에 사용자 정의 글꼴을 추가한 후에는 사용자 정의 블로그 또는 페이지 모듈에서 사용할 수 있습니다. 사용자 지정 코딩된 이메일 템플릿에 사용자 지정 글꼴을 추가하는 방법을 알아보세요.

  • HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  • 파인더에서 사용자 지정 모듈을 엽니다.
  • module.css 섹션에 다음 코드를 붙여넣습니다:
@font-face { font-family: 'Your Font Name'; src: url('your_font_file.eot?') format('eot'), url('your_font_file.woff') format('woff'), url('your_font_file.ttf') format('truetype');}
  • 글꼴 이름을 글꼴 이름으로 바꿉니다.
  • your_font_file.xxx? 를 파일 도구의 URL로 바꿉니다. 각 파일 형식에 대해 이 과정을 반복합니다.
  • 사용자 정의 글꼴을 적용하려면 font-family 속성을 사용하여 CSS 규칙을 만듭니다.
  • 오른쪽 상단에서 변경 사항 게시를 클릭하여 변경 사항을 실시간으로 적용합니다.

이 문서가 도움이 되었나요?
이 양식은 문서 피드백에만 사용됩니다. HubSpot으로 도움을 받는 방법 알아보기.