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

HubSpot에서 글꼴 사용

마지막 업데이트 날짜: 2026년 5월 18일

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

HubSpot의 글꼴은 콘텐츠 유형과 글꼴 유형에 따라 다양한 방식으로 사용할 수 있습니다. 일부 기본 글꼴은 모든 콘텐츠 편집기에서 사용할 수 있습니다. 웹 글꼴과 사용자 지정 글꼴은 테마 설정, 스타일 시트, 사용자 지정 모듈 또는 코딩된 템플릿에 추가해야 할 수 있습니다

.

시작하기 전에

HubSpot에서 글꼴을 사용하기 전에 요구 사항과 고려 사항을 확인하십시오.

권한 필요 글꼴을 사용하는 위치에 따라 사용자에게 추가 권한이 필요할 수 있습니다:

제한 사항 및 고려 사항 이해

  • 모든 계정에서 모든 콘텐츠 유형을 사용할 수 있는 것은 아닙니다. 구독에서 사용할 수 있는 콘텐츠 유형을 확인하려면 제품 및 서비스 카탈로그를 검토하십시오.
  • 아래 표를 확인하여 각 콘텐츠 유형에서 사용할 수 있는 글꼴 옵션을 파악하십시오:
콘텐츠 유형 글꼴 유형  
  기본 글꼴 웹 글꼴

사용자 지정 글꼴

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

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

HubSpot 콘텐츠 전반에서 기본 글꼴이 지원되지만, 사용 가능한 옵션과 적용 가능한 위치는 콘텐츠 유형에 따라 다릅니다.

  1. 콘텐츠로 이동:

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

웹 글꼴 사용

일부 HubSpot 콘텐츠에서는 웹 글꼴이 지원되지만, 리치 텍스트 편집기의 글꼴 드롭다운 메뉴에서는 사용할 수 없습니다. 콘텐츠 유형에 따라 웹 글꼴은 테마 설정, 스타일시트, 사용자 지정 모듈 또는 코딩된 템플릿에서 적용할 수 있습니다. 

개발자는 폰트 필드를 사용하여 테마 및 사용자 지정 모듈에 웹 폰트를 추가할 수 있습니다. 이러한 방식으로 웹 폰트가 추가되면 HubSpot은

타사

서비스에서 폰트를 불러오는 대신

콘텐츠의

도메인에서 직접

폰트를

로드합니다.

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

  1. fonts.google.com으로 이동합니다.
  2. 검색 창에글꼴 이름을 입력합니다. 
  3. 글꼴 이름을 클릭하여 가져올 수 있는 스타일 목록을 확인합니다.
  4. 오른쪽 상단의 '글꼴 가져오기'를 클릭합니다.
  5. 오른쪽 상단의 '임베드 코드 가져오기'를 클릭합니다.
  6. 오른쪽 열에서 '웹 ' 탭의 @import를 선택합니다.
  7. <style> 태그를 제외한 @import 코드를 복사합니다.
  8. CSS 규칙을 설정하기 위한CSS 클래스 코드를 복사하세요. 

  1. Google Fonts에서 코드를 복사한 후, HubSpot 콘텐츠에 글꼴을 추가할 수 있습니다: 

스타일시트에서 Google Font 사용

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

사용자 정의 코딩 이메일 템플릿에서 Google Fonts 사용

Google Fonts는 Apple Mail 및 일부 다른 이메일 클라이언트에서 지원되지만, 광범위한 지원은 제한적입니다. 대부분의 인기 있는 이메일 클라이언트는 기본 웹 폰트만 지원합니다. 클래식 이메일 편집기에서 사용되는 기본 폰트 선택에 대해 자세히 알아보세요. 

구독 필요 사용자 정의 코딩 이메일 템플릿을 제작하려면 Marketing Hub Professional 또는 Enterprise 구독이 필요합니다.


사용자 정의 코딩 이메일 템플릿에 Google Fonts를 추가하려면: 

  1. Google Fonts에서 글꼴의 @import 코드를 복사합니다.
  2. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  3. 파인더에서 사용자 정의 코딩 이메일 템플릿을 엽니다.
  4. 템플릿의<head> 섹션에서 <style>....</style> 태그 사이에 @import 코드를 붙여넣습니다. 
  5. 템플릿의 <body> 섹션에서 인라인 스타일링으로 사용자 지정 글꼴을 추가합니다. 
  6. 오른쪽 상단의 '변경 사항 게시'를클릭하여 변경 사항을 적용합니다. 

CTA에서 Google Font 사용(구 버전)

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

양식에서 Google Font 사용

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

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

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

  1. HubSpot 계정에서 콘텐츠 > 디자인 관리자로 이동합니다.
  2. 파인더에서 사용자 지정 모듈의 이름을 클릭합니다. 사용자 지정 모듈 생성에 대해 자세히 알아보세요.
  3. 인스펙터의'필드' 섹션에서 '필드 추가' 드롭다운메뉴를 클릭하고 '글꼴'을 선택합니다. 글꼴 필드 사용에 대해 자세히 알아보세요.
  1. 오른쪽 상단에서 '변경 사항 게시'를클릭하여 변경 사항을 적용합니다. 
  2. 콘텐츠로 이동:
  3. 사용자 정의 모듈을 사용하여 콘텐츠 이름을 클릭하세요. 
  4. 콘텐츠 편집기에서사용자 정의 모듈을 클릭하세요. 
  5. 사이드바 편집기에서글꼴 필드 드롭다운메뉴를 클릭하고Google Font를 선택하세요. 

사용자 지정 글꼴 사용

표준 웹 글꼴이나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 Name'을 폰트 이름으로 바꾸세요.
    • 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 Name'을 실제 폰트 이름으로 바꾸세요.
    • 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: 'Your Font Name';
  5. 'Your Font Name'을실제 폰트 이름으로바꾸세요.
  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');}

    • 'Your Font Name'을 폰트 이름으로 바꾸세요.
    • 'your_font_file.xxx?'를파일 도구에서 가져온URL로교체하십시오. 각 파일 형식마다 이 과정을 반복하십시오.
  2. 사용자 정의 글꼴을 적용하려면 font-family 속성을 사용하여 CSS 규칙을 생성하세요. 
  3. 오른쪽 상단의 '변경 사항 게시'를클릭하여 변경 사항을 적용하세요. 
이 문서가 도움이 되었나요?
이 양식은 문서 피드백에만 사용됩니다. HubSpot으로 도움을 받는 방법 알아보기.

관련 콘텐츠

목차 /ko/website-and-landing-pages/use-fonts-in-hubspot?version=published 메뉴

관련 콘텐츠

New call-to-action