구글 폰트 사용하기 (부분 적용하기) : 코덱스타일

디자인모드구글 폰트 사용하기 (부분 적용하기)

폰트의 경우 저작권 문제가 발생할 수 있어 에디터상에서 폰트 변경을 진행할 수 없게 되어 있습니다.
하지만 사용자가 직접 웹폰트를 적용할 수 있는 방법이 있으며, 추후 발생되는 저작권의 문제는 당사에서 책임지지 않습니다.

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

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

Google Fonts 에 접속합니다.
왼쪽 상단의 검색 필드에 원하는 폰트 이름을 영문으로 작성합니다.
폰트 검색 결과가 나오면 마음에 드는 폰트를 클릭합니다.
마우스 휠 스크롤을 내려 Style 섹션으로 이동 후, 사용하려는 폰트 스타일을 선택합니다. (복수 선택 가능)
주의: 검색한 폰트의 한글 지원 여부를 확인해 주세요. 영문만 지원하는 폰트를 선택하는 경우, 시스템 기본 폰트 또는 디자인모드에서 설정한 폰트로 표시될 수 있습니다.
아래 그림과 같이 브라우저 오른쪽에서 선택한 폰트의 HTML 코드와 CSS 코드가 나타납니다.

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

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

디자인 모드에 접속합니다.
왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
코드 위젯을 클릭합니다.
코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.
아래의 코드를 복사해 코드 설정에 붙여넣습니다.
참고: 만약 상단 메인 메뉴의 폰트까지 변경하려는 경우 p 오른쪽에 , span 코드를 추가하세요.
<style>
h1, h2, h3, h4, h5, h6, p {
font-family: '폰트명' !important;
}
</style>
붙여넣은 코드에서 폰트명이라 작성된 한글을 삭제하고, 위 1단계 5번 과정에서 생성된 폰트명(font-family 속성 오른쪽에 작은 따옴표 사이 표시되어 있음)으로 대체합니다. 이 도움말을 예로 들면 폰트명을 Nanum Myeongjo 로 입력해야 합니다.
디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
해당 페이지의 전체에, 선택한 폰트가 표시되는지 확인합니다.
문제가 없다면 게시하기 버튼을 클릭해 적용합니다.

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