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

HubSpot에서 글꼴 사용하기

마지막 업데이트 날짜: 2026년 8월 14일

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

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

시작하기 전에

HubSpot에서 글꼴을 사용하기 전에, 관련 요구 사항과 고려 사항을 확인하시기 바랍니다.

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

제한 사항 및 고려 사항 이해

  • 모든 계정에서 모든 콘텐츠 유형을 이용할 수 있는 것은 아닙니다. 구독에서 이용할 수 있는 콘텐츠 유형을 확인하려면 ‘ & 서비스 카탈로그’를 참조하십시오.
  • 각 콘텐츠 유형별로 어떤 글꼴 옵션을 사용할 수 있는지 확인하려면 아래 표를 살펴보세요:
콘텐츠 유형 글꼴 종류  
  기본 글꼴 웹 폰트

사용자 정의 글꼴

 
페이지 - 테마 템플릿 테마 설정 및 스타일시트를 통해 사용할 수 있습니다.  
페이지 - 코딩된 템플릿 스타일시트 또는 사용자 정의 모듈을 통해 사용할 수 있습니다. 스타일시트를 통해 사용할 수 있습니다  
블로그 스타일시트 또는 사용자 정의 모듈을 통해 사용할 수 있습니다.  
이메일 일부 기본 글꼴은 드래그 앤 드롭 이메일 편집기에서 사용할 수 없습니다. 맞춤형 코딩 이메일 템플릿에서만 사용 가능하며, 대부분의 이메일 클라이언트에서는 지원되지 않습니다. 맞춤형 코딩 이메일 템플릿에서만 사용 가능하며, 대부분의 이메일 클라이언트에서는 지원되지 않습니다.  
양식 ‘스타일’ 탭의 양식 편집기에서 사용할 수 있습니다. 양식이 삽입된 페이지나 게시물의 테마 내 사용자 정의 글꼴 또는 스타일시트 내 사용자 정의 글꼴을 통해 사용할 수 있습니다.  
기술 자료 기사 편집기에서는 글꼴을 사용자 지정할 수 없습니다. 테마 설정에서 이용 가능   테마 설정에서 이용 가능  
사용자 정의 모듈 이메일에서 사용되지 않는 사용자 정의 모듈에 적용 가능 이메일에서 사용되지 않는 사용자 정의 모듈에 적용 가능  
CTA (구 버전)  
CTA  

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

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

  1. 콘텐츠로 이동합니다:

  2. 콘텐츠 이름을 클릭하세요.
  3. 콘텐츠 편집기에서리치 텍스트 모듈을 클릭한 다음, 편집할 텍스트를 선택합니다. 
  4. 서식 도구 모음에서‘글꼴’ 드롭다운메뉴를 클릭한 다음 글꼴을 선택합니다. 리치 텍스트 모듈에서는 다음 글꼴을 사용할 수 있습니다:
기본 글꼴
브랜드 전용 서체 메리웨더
안달레 모노 모나코
Arial 기호
Book Antiqua 타호마
Courier New 터미널
조지아 Times New Roman
헬베티카 트레뷰셰트 중학교
영향 베르다나
라토  
기본 글꼴
Arial 메리웨더*
Courier New 타호마
조지아 Times New Roman
헬베티카 트레뷰셰트 중학교
라토* 베르다나
*드래그 앤 드롭 이메일 편집기에서는 웹 폰트로만 사용할 수 있습니다.

 

웹 글꼴 사용

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

개발자는 글꼴 필드를 사용하여 테마와 사용자 정의 모듈에 웹 글꼴을 추가할 수 있습니다. 이러한 방식으로 웹 글꼴을 추가하면, HubSpot은 타사 서비스에서 글꼴을 불러오는 대신 콘텐츠의 도메인에서 직접 글꼴을 불러옵니다.

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

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

Google Fonts 페이지에는 Google Font를 삽입하기 위한 ‘웹(Web)’ 탭이 표시됩니다. 삽입 코드와 CSS 클래스에 대한 ‘코드 복사’ 버튼은 상자 안에 표시됩니다.

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

스타일시트에서 Google Fonts 사용

  1. Google Fonts에서 해당 글꼴의 @import 코드를 복사하세요.
  2. HubSpot 계정에서 더 보기를 클릭한 다음 콘텐츠 > 디자인 관리자로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 콘텐츠 > 디자인 관리자로 이동하세요.
  3. Finder에서 해당 콘텐츠에 사용되는 스타일시트를 열어주세요.
  4. 스타일시트의 1번째 줄에 @import 코드를 붙여넣으세요. 
  5. 스타일시트에서 적절한 선택자에 CSS 규칙을 설정하는 코드를 추가하세요.
  6. 오른쪽 상단의 ‘변경 사항 게시’를 클릭하여 변경 사항을 적용하세요. 
디자인 관리자에는 CSS 파일이 표시됩니다. 코드 편집기에서는 파일 상단에 Google Font 가져오기 코드가 있으며, 그 아래에는 스타일시트 내의 해당 선택자에 대한 CSS 규칙이 나열되어 있습니다.

직접 코딩한 이메일 템플릿에서 Google Fonts 사용하기

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

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


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

  1. Google Fonts에서 해당 글꼴의 @import 코드를 복사하세요.
  2. HubSpot 계정에서 더 보기를 클릭한 다음 콘텐츠 > 디자인 관리자로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 콘텐츠 > 디자인 관리자로 이동하세요.
  3. Finder에서 사용자 정의 코드가 포함된 이메일 템플릿을 엽니다.
  4. 템플릿의<head> 템플릿의 해당 섹션에서, @import 코드를 <style>....</style> 태그 사이에 붙여넣으세요. 
  5. 템플릿의 ‘ <body> ’ 섹션에서 인라인 스타일링을 통해 사용자 정의 글꼴을 추가하세요. 
  6. 오른쪽 상단의 ‘변경 사항 게시’를클릭하여 변경 사항을 적용하세요

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

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

양식에 Google Font 사용하기

  1. HubSpot 계정에서 더 보기를 클릭한 다음 마케팅 > 양식으로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 마케팅 > 양식으로 이동하세요.
  2. 양식 이름 위에 마우스를 올린 다음 ‘작업’ > 에서 ‘양식 편집’ 또는 ‘새 양식 만들기’를 클릭합니다.
  3. 양식 편집기에서 ‘스타일 & ’ 미리보기 탭을 클릭합니다. 
  4. 왼쪽 사이드바 메뉴에서‘스타일’ 섹션을클릭하세요.
  5. '텍스트' 섹션에서'글꼴 계열' 드롭다운 메뉴를 클릭하고Google Font 중 하나를 선택하세요. 
  6. 오른쪽 상단의‘업데이트’ 또는‘게시’를 클릭하여 변경 사항을 적용하세요. 

사용자 정의 모듈에서 Google Fonts 사용하기

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

  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 계정에서 더 보기를 클릭한 다음 콘텐츠 > 파일로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 콘텐츠 > 파일로 이동하세요.
  2. ‘파일 업로드’를 클릭하세요.
  3. 컴퓨터의 하드 드라이브에서글꼴 파일을 선택한 다음‘열기’를 클릭하십시오.
  4. 업로드된 글꼴 파일의 이름을 클릭하세요.
  5. 오른쪽 패널에서‘URL 복사’를 클릭하여 파일이 호스팅된 URL을 복사하세요. 각 파일 형식에 해당하는 글꼴의 URL이 필요합니다.

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

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

  1. HubSpot 계정에서 더 보기를 클릭한 다음 콘텐츠 > 디자인 관리자로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 콘텐츠 > 디자인 관리자로 이동하세요.
  2. Finder에서 해당 콘텐츠에 사용되는 스타일시트를 열어주세요.
  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');}

    • ‘Font Name’을 해당 글꼴 이름으로 바꾸세요.
    • "your_font_file.xxx?"를파일 도구에서 확인한URL 바꾸세요. 각 파일 형식마다 이 과정을 반복합니다.
  1. 사용자 정의 글꼴을 적용하려면 font-family 속성을 사용하여 CSS 규칙을 작성하세요. 
  2. 오른쪽 상단의 ‘업데이트’ 또는‘게시’를 클릭하여 변경 사항을 적용하세요. 

드래그 앤 드롭 이메일 편집기에서 이메일에 사용자 지정 글꼴 사용하기

Apple Mail에서는 사용자 지정 이메일 글꼴이 지원되며, Samsung Mail에서는 부분적으로 지원됩니다. Gmail, Outlook 및 대부분의 모바일 웹 클라이언트에서는 사용자 정의 글꼴이 지원되지 않습니다. 독자들에게 일관된 경험을 제공하기 위해, 이메일에서 기본 웹 글꼴을 사용하는 것이 좋습니다.

다만, 드래그 앤 드롭 이메일 편집기에서 이메일에 사용자 정의 글꼴을 추가하고 싶다면, 브랜드 키트에 사용자 정의 글꼴을 업로드하고 대체 글꼴을 설정한 후에 추가할 수 있습니다. 

  1. 브랜드 키트에 사용자 정의 글꼴을 추가한 다음, 해당 글꼴과 가장 유사한 대체 글꼴을 선택하세요. 대체 글꼴과 관련된 문제를 방지하려면:  
  2. HubSpot 계정에서 더 보기를 클릭한 다음 마케팅 > 이메일로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 마케팅 > 이메일로 이동하세요.
  3. 마케팅이메일의 이름을클릭하거나,‘이메일 만들기’를 클릭하여 새 이메일을 작성하세요.
  4. 단락이나 제목과 같은 텍스트 유형의 서식을 지정하기 위해 사용자 정의 글꼴을 사용하려면:
    • 이메일 편집기에서 왼쪽 사이드바에 있는 템플릿 디자인 아이콘을클릭하세요.
    • ‘텍스트 스타일섹션에서드롭다운 메뉴를 클릭한다음,‘사용자 지정 글꼴 ’ 섹션에서 글꼴을선택합니다.

마케팅 이메일 편집기의 스크린샷입니다. ‘텍스트 스타일’ 섹션에서 드롭다운 메뉴가 강조 표시되어 있으며, 사용자 지정 글꼴 옵션도 선택된 상태입니다.

  1. 리치 텍스트 모듈에서 사용자 정의 글꼴을 사용하려면: 
    • 이메일 편집기에서 서식 있는 텍스트 모듈 내의 텍스트를 선택합니다.
    • 리치 텍스트 편집기에서글꼴 드롭다운 메뉴를 클릭한 다음,‘사용자 지정 글꼴’ 위로 마우스를 가져간 후, 원하는 사용자 지정 글꼴 위로 마우스를 가져가서글꼴 두께를 선택하세요.

마케팅 이메일 편집기의 리치 텍스트 모듈 스크린샷입니다. 글꼴 드롭다운 메뉴와 HubSpot 사용자 정의 글꼴의 ‘Thin’ 굵기가 강조 표시되어 있습니다.

  1. 이메일 내용을 작성한 다음, 여러 이메일 클라이언트에서 이메일을 미리 확인해 보세요.
  2. 이메일을 최종 확인하고 발송하세요.

직접 코딩한 이메일 템플릿에서 사용자 정의 글꼴 사용하기

Apple Mail에서는 사용자 정의 글꼴이 지원되며, Samsung Mail에서는 부분적으로 지원됩니다. Gmail, Outlook 및 대부분의 모바일 웹 클라이언트에서는 사용자 정의 글꼴이 지원되지 않습니다. 독자들에게 일관된 경험을 제공하기 위해, 이메일에서 기본 웹 글꼴을 사용하는 것이 좋습니다.

다만, 직접 코딩한 이메일 템플릿에 사용자 정의 글꼴을 추가하고 싶다면, ‘파일’ 도구에서 해당 글꼴을 추가한 후에 설정할 수 있습니다.

  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');}

    • ‘Font Name’을 해당 글꼴 이름으로 바꾸세요.
    • "your_font_file.xxx?"를파일 도구에서 확인한URL바꾸세요. 각 파일 형식마다 이 과정을 반복합니다. 
  1. 이메일 본문의 코드에서 인라인 스타일로 사용자 정의 글꼴을 추가하세요. 
  2. 오른쪽 상단의 ‘업데이트’ 또는‘게시’를 클릭하여 변경 사항을 적용하세요. 

CTA에 사용자 정의 글꼴 사용하기

테마에 사용자 정의 글꼴을 추가한 후에는 CTA에서 해당 글꼴을 사용할 수 있습니다.

  1. HubSpot 계정에서 더 보기를 클릭한 다음 마케팅 > CTA로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 마케팅 > CAT로 이동하세요.
  2. 왼쪽 상단의 드롭다운 메뉴를 클릭하고 CTA를 선택하세요.
  3. CTA 위에 마우스를 올린 다음, ‘작업’ >‘편집’을 차례로 클릭합니다. 
  4. CTA 편집기의 왼쪽 패널에서 ‘디자인’ 탭을 클릭합니다. 
  5. '스타일' 섹션을 클릭하여 내용을 펼치세요.
  6. '기본 글꼴' 드롭다운 메뉴를 클릭하고 사용자 지정 글꼴을 선택하세요. 
  7. CTA 작성을 계속하세요

CTA에서 사용자 정의 글꼴 사용하기 (구 버전)

CTA와 마찬가지로, 사용자 정의 글꼴 파일을 업로드한 후에는 기존 CTA에서 이를 사용하십시오.

  1. HubSpot 계정에서 더 보기를 클릭한 다음 마케팅 > CTA로 이동하세요. 더 보기가 계정에 표시되지 않으면 바로 마케팅 > CAT로 이동하세요.
  2. CTA 위에 마우스를 올린 다음, ‘작업’ >‘편집’을 차례로 클릭합니다. 
  3. 오른쪽 패널에서‘고급 옵션’을 클릭합니다. 
  4. 텍스트 상자에 다음 코드를 붙여넣으세요:

    font-family: 'Your Font Name';
  5. ‘Font Name’을해당 글꼴 이름으로 바꾸세요.
  6. 오른쪽 하단에서‘다음’을 클릭하세요. 그런 다음 저장을 클릭합니다.

양식에서 사용자 정의 글꼴 사용하기

‘브랜드 설정 ’에서 지정한 사용자 정의 글꼴과 브랜드 글꼴은 양식 편집기에서 직접 사용할 수 없습니다. 글꼴 선택기에는 기본 글꼴과 Google Fonts만 표시됩니다.

양식에 사용자 지정 글꼴이나 브랜드 글꼴을 적용하려면, 먼저 양식이 삽입된 페이지 또는 블로그 게시물 수준에서 해당 글꼴을 불러와야 합니다:

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

파일 도구에서 사용자 정의 글꼴을 추가한 후, 사용자 정의 블로그 또는 페이지 모듈에서 해당 글꼴을 사용하세요. 직접 코딩한 이메일 템플릿에 사용자 정의 글꼴을 추가하는 방법을 알아보세요. 

  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');}

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