사이트에 사용자 정의 글꼴 사용하는 방법

작동 방식

웹사이트 빌더에서 사용할 수 있는 기본 글꼴을 사용하고 싶지 않다면 사용자 지정 HTML 코드를 통해 헤더 또는 본분용으로 다른 글꼴을 Google 글꼴 카탈로그에서 연결할 수 있습니다. 기존 솔루션 또는 자체 코드를 추가할 수 있습니다.

획득 방법

기존 솔루션 사용

  1. 관리자 페이지에서 프로젝트를 엽니다.
  2. 사이드 바에서 웹사이트 빌더를 클릭합니다.
  3. 웹사이트 빌더 열기를 클릭합니다.
  4. 글꼴 URL을 사용자 정의 코드 블록에 삽입하고 font-family 값을 변경해야 할 스타일 클래스를 지정합니다.

헤더 폰트 변경 예제

Copy
Full screen
Small screen
<style>
@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');

  .custom-header-font h1,
  .custom-header-font h2,
  .custom-header-font h3,
  .custom-header-font h4,
  .custom-header-font h5,
  .custom-header-font h6 {
    font-family: 'Playfair Display';
  }
</style>

바디 텍스트 폰트 변경 예제

Copy
Full screen
Small screen
<style>
  @import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');

  .custom-main-font {
    font-family: 'Playfair Display';
  }
</style>

  1. 미리 보기를 클릭하여 변경 내역을 봅니다.

이 지침에 대한 튜토리얼 동영상 시청:


자체 코드 추가

  1. 빌더에서 블록 추가를 클릭하고 사용자 지정 코드를 선택합니다.
  1. 자체 코드를 블록에 삽입합니다.
이 기사가 도움이 되었나요?
감사합니다!
개선해야 할 점이 있을까요? 메시지
유감입니다
이 기사가 도움이 안 된 이유를 설명해 주세요. 메시지
의견을 보내 주셔서 감사드립니다!
메시지를 검토한 후 사용자 경험 향상에 사용하겠습니다.

유용한 링크

마지막 업데이트: 2024년 3월 26일

오자 또는 기타 텍스트 오류를 찾으셨나요? 텍스트를 선택하고 컨트롤+엔터를 누르세요.

문제 보고
콘텐츠를 항상 검토합니다. 여러분의 피드백은 콘텐츠를 개선에 도움이 됩니다.
후속 조치를 위해 이메일을 제공해 주세요
의견을 보내 주셔서 감사드립니다!