구글 폰트 사용하기 (부분 적용하기)

특정 페이지 또는 특정 문구에만 구글 폰트(글꼴)를 적용할 수 있습니다. 구글 폰트의 글꼴들은 SIL Open Font License 1.1 라이센스가 적용되어 사이트에 자유롭게 사용하실 수 있습니다.

주의: 구글 폰트 사용에는 HTML 및 CSS에 대한 이해가 필요합니다. 또한 제공되는 소스 코드 및 도움말 외 추가적인 기술 및 고객지원은 제공하지 않습니다.

1단계: 구글 폰트에서 원하는 폰트 찾기

  1. Google Fonts 에 접속합니다.
  2. 왼쪽 상단의 검색 필드에 원하는 폰트 이름을 영문으로 작성합니다.

  3. 폰트 검색 결과가 나오면 마음에 드는 폰트를 클릭합니다.

  4. 마우스 휠 스크롤을 내려 Style 섹션으로 이동 후, 사용하려는 폰트 스타일을 선택합니다. (복수 선택 가능)

    주의: 검색한 폰트의 한글 지원 여부를 확인해 주세요. 영문만 지원하는 폰트를 선택하는 경우, 시스템 기본 폰트 또는 아임웹에서 설정한 폰트로 표시될 수 있습니다.

  5. 아래 그림과 같이 브라우저 오른쪽에서 선택한 폰트의 HTML 코드와 CSS 코드가 나타납니다.

2단계: 폰트 파일을 내 사이트로 불러오기

위 1단계에서 선택한 폰트 파일을 내 사이트로 불러옵니다.

  1. 새 브라우저 탭을 켜고, 내 아임웹 사이트 관리자 페이지로 이동합니다. 접속방법
  2. 왼쪽 메뉴에서 [환경설정 > SEO(검색엔진최적화)]를 클릭해 이동합니다.
  3. 위 1단계 5번 과정에서 생성된 코드 1번을 복사 후 Header Code 입력 칸에 붙여넣습니다.

3단계: 폰트 적용하기

구글 폰트를 특정 페이지 또는 특정 문장(또는 단어)에 적용할 수 있습니다. 원하는 디자인 콘셉트에 따라 아래 방법1 또는 방법2를 참고해 폰트를 적용해 주세요.

방법1. 특정 페이지에 적용하기
  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
  3. 코드 위젯을 클릭합니다.
  4. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  5. 컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.
  6. 아래의 코드를 복사해 코드 설정에 붙여넣습니다.
    참고: 만약 상단 메인 메뉴의 폰트까지 변경하려는 경우 p 오른쪽에 , span 코드를 추가하세요.

    <style>
    h1, h2, h3, h4, h5, h6, p {
        font-family: '폰트명' !important;
        }
    </style>
    
  7. 붙여넣은 코드에서 폰트명이라 작성된 한글을 삭제하고, 위 1단계 5번 과정에서 생성된 폰트명(font-family 속성 오른쪽에 작은 따옴표 사이 표시되어 있음)으로 대체합니다. 이 도움말을 예로 들면 폰트명을 Nanum Myeongjo 로 입력해야 합니다.

  8. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  9. 해당 페이지의 전체에, 선택한 폰트가 표시되는지 확인합니다.
  10. 문제가 없다면 게시하기 버튼을 클릭해 적용합니다.
방법2. 특정 문구에 적용하기
  1. 디자인 모드 왼쪽 상단의 위젯 추가 + 아이콘을 클릭 후 텍스트 위젯을 추가합니다.
  2. 텍스트 위젯을 마우스로 더블-클릭합니다.
  3. 텍스트 에디터가 켜지면 글을 작성합니다.
  4. 글 작성을 마치면 텍스트 도구의 코드보기 </> 아이콘을 클릭합니다.
  5. 폰트를 변경하려는 문장(또는 단어) 앞에 <span style="font-family: '폰트명' !important;"> 를 복사해 붙여넣습니다.
  6. 폰트명이라 작성된 텍스트를 삭제하고, 위 1단계 5번 과정에서 생성한 폰트명을 붙여넣습니다. 이 도움말을 예로 들면, 폰트명을 Nanum Myeongjo 로 변경해야 합니다.
  7. 문장(또는 단어)의 끝에는 </span> 입력합니다.
  8. 부분 코드 입력을 마치면, 아래 그림의 빨간색 하이라이트 쳐진 부분과 같이 코드가 작성됩니다.

  9. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  10. 아래 그림과 같이 지정된 문장의 폰트가 변경된 걸 확인할 수 있습니다.

  11. 문제가 없다면 게시하기 버튼을 클릭해 적용합니다.
목록으로