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

특정 페이지 전체 또는 특정 문구에만 구글 폰트를 적용할 수 있습니다.

1단계: Google Fonts에서 글꼴 찾기

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

   

3. 마음에 드는 글꼴이 나오면 마우스로 클릭합니다.

   

4. 웹사이트에 사용할 글꼴의 + Select this style을 클릭합니다.
   주의: 검색한 글꼴의 한글 지원 여부를 확인해 주세요. 영문만 지원하는 글꼴을 선택하는 경우, 한글은 시스템 기본 글꼴 또는 캠페이너스에서 설정한 글꼴로 표시될 수 있습니다.

   

5. 아래 그림과 같이 브라우저 오른쪽에서, 선택한 글꼴의 HTML 코드와 CSS 코드가 생성됩니다.

   

2단계: 폰트 파일 불러오기

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

1. 새 브라우저 탭을 켭니다.
2. 내 사이트 관리자 페이지에 접속합니다. 
3. 왼쪽 메뉴에서 [환경설정 > SEO, 헤더설정]을 클릭해 이동합니다.
4. 위 1단계 5번 과정에서 생성된 코드 1번을 복사한 다음 Header Code 란에 붙여넣습니다.

   

3단계: 사이트에 적용하기

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

방법1. 특정 페이지 전체에 적용하기

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

   <style> h1, h2, h3, h4, h5, h6, p {     font-family: '글꼴명' !important;     } </style> 

8. 붙여넣은 코드에서 글꼴명이라 작성된 한글을 삭제하고, 위 1단계 5번 과정에서 생성된 글꼴명(font-family 속성 오른쪽에 작은 따옴표 사이 표시되어 있음)으로 대체합니다. 이 도움말을 예로 들면 글꼴명을 Nanum Myeongjo로 입력해야 합니다.

   

9. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
10. 해당 페이지의 전체에, 선택한 글꼴이 표시되는지 확인합니다.
11. 문제가 없다면 게시하기 버튼을 클릭해 적용합니다.

방법2. 특정 문구에 적용하기

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

   

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

    

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