콘텐츠로 건너뛰기
HubSpot 기술 자료
주의:: 이 문서는 사용자의 편의를 위해 제공됩니다. 이 문서는 번역 소프트웨어를 사용하여 자동으로 번역되었으며 교정을 거치지 않았을 수 있습니다. 이 문서의 영어 버전이 가장 최신의 정보를 확인할 수 있는 공식 버전으로 간주해야 합니다. 여기에서 액세스할 수 있습니다..

HubSpot에서 글꼴 사용

마지막 업데이트 날짜: 2026년 2월 25일

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

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

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

사용자 정의 글꼴

  
페이지 - 테마 템플릿 ✓ 테마 설정 및 스타일시트를 통해 사용 가능 ✓  
페이지 - 코딩된 템플릿 ✓ 스타일시트 또는 사용자 정의 모듈을 통해 사용 가능 스타일시트를 통해 사용 가능  
블로그 ✓ 스타일시트 또는 사용자 정의 모듈을 통해 사용 가능 ✓  
이메일 드래그 앤 드롭 이메일 편집기에서 일부 기본 글꼴을 사용할 수 없음 사용 가능한 항목: 사용자 정의 코딩된 이메일 템플릿 전용; 대부분의 이메일 클라이언트에서 지원되지 않음 사용 가능한 기능: 사용자 정의 코딩된 이메일 템플릿에만 적용되며, 대부분의 이메일 클라이언트에서는 지원되지 않습니다  
지식 기반 기사 편집기에서 글꼴을 사용자 정의할 수 없습니다 테마 설정에서 사용 가능   테마 설정에서 사용 가능  
사용자 정의 모듈 ✓ 이메일에서 사용되지 않는 사용자 정의 모듈에 사용 가능 이메일에서 사용되지 않는 사용자 정의 모듈에 사용 가능  
CTA (레거시) ✓ ✓ ✓  
CTA ✓ ✓ ✓  

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

리치 텍스트 모듈에서 기본 글꼴 사용

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

  1. 콘텐츠로 이동하세요:

  2. 콘텐츠 이름을 클릭하세요. 
  3. 콘텐츠 편집기에서리치 텍스트 모듈을 클릭한 후 편집할 텍스트를 선택하세요. 
  4. 리치 텍스트 도구 모음에서글꼴 드롭다운메뉴를 클릭하고 글꼴을 선택하세요. 리치 텍스트 모듈에서 사용할 수 있는 글꼴은 다음과 같습니다: 
    • 브랜드 글꼴

    • 안달레 모노*

    • Arial

    • 북 안티쿠아*

    • 쿠리어 뉴

    • 조지아

    • 헬베티카

    • 임팩트*

    • 라토**
    • 메리웨더**
    • 모나코*

    • Symbol*

    • Tahoma

    • 터미널*

    • Times New Roman

    • 트레뷰셋 MS

    • 베르다나

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

**드래그 앤 드롭 이메일 편집기에서는 웹 폰트로만 사용 가능.

웹 글꼴 사용

웹 글꼴은 콘텐츠 편집기에서 기본적으로 사용할 수 있습니다.

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

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

Google Fonts와 같은 타사 서비스를 사용하려면 폰트 임포트 코드를 복사하여 콘텐츠 스타일시트에 붙여넣은 후 CSS를 통해 폰트를 적용하세요:

  1. fonts.google.com으로 이동하세요.
  2. 검색창에글꼴 이름을 입력하세요. 
  3. 글꼴 이름을 클릭하면 가져올 수 있는 스타일 목록이 표시됩니다.
  4. 가져오려는 각 스타일 옆에 있는 '+ 이 스타일 선택'을 클릭하세요.
  5. 오른쪽 패널의웹에서 사용 섹션에서 @import를선택하세요. 
  6. 글꼴 코드를 복사하세요: 
    • 웹에서 사용 섹션에서 <style> 태그를 제외한 @import 코드를 복사합니다.
    • '패밀리 지정용 CSS 규칙' 필드에 CSS 규칙 설정을 위한코드를붙여넣으세요. 

Google Fonts에서 코드를 확보한 후 HubSpot 콘텐츠에 글꼴을 추가할 수 있습니다: 

스타일시트에서 Google Font 사용하기

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

사용자 정의 코드 이메일 템플릿에서 Google Font 사용하기

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

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

  1. 해당 글꼴에 대한 CSS 규칙 설정을 위한 Google 코드를 복사하세요.
  2. HubSpot 계정에서 마케팅 > CTA로 이동합니다.
  3. CTA 위에 마우스를 올린 다음 작업 > 편집을 클릭합니다. 
  4. 오른쪽 패널에서고급 옵션을 클릭합니다. 
  5. 텍스트 상자에 해당 글꼴에 대한 CSS 규칙을 설정하기 위한 Google 코드를 붙여넣으세요. 
  6. 오른쪽 하단에서다음을 클릭하세요. 그런 다음 저장을 클릭하세요.

양식에서 Google 글꼴 사용

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

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

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


  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 왼쪽 파인더에서 사용자 정의 모듈을 엽니다. 사용자 정의 모듈 생성 방법에 대해 자세히 알아보세요 .
  3. 오른쪽 검사기에서필드 섹션의필드 추가드롭다운을 클릭하고글꼴을선택하세요. 글꼴 필드 작업에 대해 자세히 알아보세요 .

  4. 오른쪽 상단에서 변경 사항 게시를클릭하여 변경 사항을 적용하세요. 

  5. 콘텐츠로 이동하세요:

  6. 사용자 정의 모듈을 사용하는 콘텐츠의 이름을 클릭합니다. 
  7. 콘텐츠 편집기에서사용자 정의 모듈을 클릭하세요. 
  8. 사이드바 편집기에서글꼴 필드 드롭다운메뉴를 클릭하고Google 글꼴을 선택하세요. 

사용자 정의 글꼴 사용

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

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

테마 편집기에서 사용자 정의 글꼴을 업로드한 후 페이지와 게시물에서 해당 글꼴을 사용할 수 있습니다. 글꼴 파일은 TTF, OTF, WOFF 형식으로 지원됩니다.

페이지 또는 게시글용 맞춤 글꼴 업로드

사용자 정의 글꼴을 업로드하면 페이지, 게시물 또는 지식 기반 문서에 사용할 수 있습니다.

  1. 콘텐츠로 이동:

  2. 콘텐츠 이름을 클릭하세요. 
  3. 콘텐츠 편집기에서편집 메뉴를클릭하고테마: [테마 이름]을 선택합니다.
  4. 왼쪽 사이드바 메뉴에서 글꼴드롭다운 메뉴를 클릭하고브랜드 글꼴 관리를 선택하세요.
  5. 이 지식 기반 문서의 단계를 따라 글꼴을 추가하거나 편집하십시오.

지식 기반 문서용 사용자 정의 글꼴 업로드

사용자 정의 글꼴을 업로드하면 페이지, 게시물 또는 지식 기반 문서에서 사용할 수 있습니다.

  1. HubSpot 계정에서 서비스 > 기술 자료로 이동합니다.
  2. 오른쪽 상단에서템플릿 사용자 지정을 클릭하세요.
  3. 왼쪽 사이드바에서 디자인 탭을 클릭합니다.
  4. 왼쪽 사이드바에서 글꼴 스타일을 클릭합니다.
  5. 글꼴드롭다운 메뉴를 클릭 하고'브랜드 글꼴 관리'를 선택하세요.
  6. 이 지식 기반 문서의 단계를 따라 글꼴을 추가하거나 편집하세요.

사용자 정의 글꼴 편집

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

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

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

참고: 사용자 정의글꼴은 디자인 관리자 접근 권한이 있는 계정에서만 사용할 수 있으며 CSS로 적용해야 합니다. 사용자 정의 글꼴을 추가해도 콘텐츠 편집기의 스타일 드롭다운 메뉴에 글꼴이추가되지는 않습니다. 

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

  1. HubSpot 계정에서 콘텐츠 > 파일로 이동합니다. HubSpot의 무료 도구를 사용하는 경우 마케팅 > 이메일로 이동합니다. 오른쪽 상단에서 이메일 도구 을 클릭하고 파일을 선택하세요.
  2. 파일 업로드를 클릭합니다. 
  3. 컴퓨터 하드 드라이브에서글꼴 파일을 선택한 다음열기를 클릭합니다. 
  4. 업로드된 글꼴 파일의 이름을 클릭합니다. 
  5. 오른쪽 패널에서URL 복사를 클릭하여 파일이 호스팅되는 URL을 복사합니다. 각 파일 형식의 글꼴에 대한 URL이 필요합니다. 

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

파일 도구로 맞춤 글꼴을 추가한 후 스타일시트에서 참조할 수 있습니다. 각 글꼴 스타일(이탤릭, 볼드 등)마다 별도의 @font-face 규칙이 필요합니다. HubSpot에서 스타일시트 작업에 대해 자세히 알아보세요. 

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더에서 콘텐츠에 사용되는 스타일시트를 엽니다.
  3. 각 글꼴 스타일에 대해: 
    • 스타일시트 상단에 다음 코드를 붙여넣으세요: 
@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로 대체하세요. 각 파일 형식마다 반복하세요.
  1. font-family 속성을 사용하여 사용자 정의 글꼴을 적용하는 CSS 규칙을 생성하세요. 
  2. 오른쪽 상단에서 업데이트 또는게시를 클릭하여 변경 사항을 적용하세요. 

사용자 정의 코드 이메일 템플릿에서 사용자 정의 글꼴 사용

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

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더에서 사용자 정의 코드 이메일 템플릿을 엽니다.
  3. 각 글꼴 스타일에 대해:
    • 템플릿의 <head> 섹션에서 <style>....</style> 태그 사이에 다음 코드를 붙여넣으세요: 
@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로대체하세요. 각 파일 형식마다 반복하세요. 
  1. 이메일 본문 코드에서 인라인 스타일링으로 맞춤 글꼴을 추가하세요. 
  2. 오른쪽 상단에서 업데이트 또는게시를 클릭하여 변경 사항을 적용하세요. 

CTA에 맞춤 글꼴 사용하기

테마에 맞춤 글꼴을 추가한 후 CTA에 사용할 수 있습니다:

      1. HubSpot 계정에서 마케팅 > CTA로 이동합니다.
      2. 왼쪽 상단의 드롭다운 메뉴를 클릭하고 CTA를 선택하세요.
      3. CTA 위에 마우스를 올린 다음 작업 > 편집을 클릭하세요. 
      4. CTA 편집기의 왼쪽 패널에서 디자인 탭을 클릭하세요. 
      5. 스타일 섹션을 클릭하여 확장합니다.
      6. 기본 글꼴 드롭다운 메뉴를 클릭하고 사용자 지정 글꼴을 선택하세요. 
      7. CTA 작성을 계속하세요. 

 

CTA(레거시)에서 맞춤 글꼴 사용

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

      1. HubSpot 계정에서 마케팅 > CTA로 이동합니다.
      2. CTA 위에 마우스를 올린 다음 작업 > 편집을 클릭합니다. 
      3. 오른쪽 패널에서고급 옵션을 클릭하세요. 
      4. 텍스트 상자에 다음 코드를 붙여넣으세요:

        font-family: '사용자 지정 글꼴 이름';
      5. 글꼴 이름을 원하는글꼴 이름으로 바꿔주세요.
      6. 오른쪽 하단에서다음을 클릭하세요. 그런 다음 저장을 클릭하세요 . 

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

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

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더에서 사용자 정의 모듈을 엽니다.
  3. 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');}
  1. Your Font Name을 사용 중인 글꼴 이름으로 교체하세요.
  2. your_font_file.xxx? 를파일 도구에서 가져온URL로교체하세요. 각 파일 형식마다 반복합니다.
  3. font-family 속성을 사용하여 사용자 정의 글꼴을 적용하는 CSS 규칙을 생성하세요. 
  4. 오른쪽 상단의 변경 사항 게시를클릭하여 변경 사항을 적용하세요. 
이 문서가 도움이 되었나요?
이 양식은 문서 피드백에만 사용됩니다. HubSpot으로 도움을 받는 방법 알아보기.

관련 콘텐츠

관련 콘텐츠

New call-to-action