플러그인 설치
본문은 ‘Easy Google Fonts’ 플러그인을 예제로 했으며 다른 플러그인을 이용하셔도 무방합니다.
1. 플러그인 설치
관리자 메뉴 [플러그인 > 새로 추가] 에서 영문으로 ‘Easy Google Fonts’ 을 검색하신 후 플러그인을 설치 및 활성화 합니다.
2. 폰트 컨트롤러 생성
관리자 메뉴 [사이트 설정 (설정) > Easy Google Fonts] 에 접속하시면 아래 이미지와 같은 설정 창이 나오게 됩니다.
1번에 설정 창 제목을 입력하신 다음 2번 ‘Create Font Control’ 버튼을 눌러 폰트 컨트롤러를 생성합니다.
3. 옵션 설정
하단의 옵션을 참고하여 모든 설정을 끝낸 후, ‘Save Font Control’ 버튼을 눌러 저장합니다.
3.1 Font Control CSS Selectors
- 웹 폰트를 적용 할 태그 및 클래스/ID 를 입력해주세요.
3.2 Font Control Properties
- [1] Force Styles (Optional) : ‘Font Control CSS Selectors’ 에서 지정한 태그를 테마의 스타일시트에 강제로 지정합니다.
3.3 Media Query Settings
- 특정 화면 크기에만 스타일을 적용하려는 경우 Min Screen, Max Screen 값을 지정합니다.
4. Google Fonts API Key 입력
상단 Settings 탭에 들어가신 후 ‘Google Fonts API Key’ 를 넣어주시기 바랍니다.
‘Google Fonts API Key’ 가 없는 경우 여기서 발급받으신 후 넣어주시기 바랍니다.
5. Theme Typography 설정
관리자 메뉴 [디자인 관리 (외모 / 테마 디자인 ) > 사용자 정의 > Typography > Theme Typography] 에 들어가신 후
하단의 이미지를 참고하여 설정해주시기 바랍니다.
5.1 Styles
- [1] Script/Subset : 폰트의 대분류를 지정하는 부분입니다.
예로, 키릴 문자를 지원하는 폰트를 선택하시면 ‘Font Family’ 부분에 지원하는 폰트만 나오게 됩니다. - [2] Font Family : 사용하실 폰트의 종류를 지정합니다.
- [3] Font Weight/Style : 폰트의 굵기를 설정합니다.
- [4] Text Decoration : 폰트의 데코레이션 설정합니다. (폰트에 밑줄/상단줄 등 지정)
- [5] Text Transform : 폰트가 대문자/소문자 또는 사용자가 입력한대로 나오도록 설정합니다.
5.2 Appearance
- [1] Font Color : 폰트의 색상을 지정합니다.
- [2] Background Color : 폰트의 배경색을 지정합니다.
- [3] Font Size : 폰트의 크기를 설정합니다.
- [4] Line Height : 폰트의 행간을 설정합니다.
- [5] Letter Spacing : 폰트의 자간을 설정합니다.
5.3 Positioning
- [1] Margin : 폰트의 외부 간격을 지정합니다.
- [2] Pading : 폰트의 내부 간격을 지정합니다.
- [3] Border : 폰트의 태두리를 설정합니다.
- [4] Border Radius : 폰트 태두리의 동근정도를 설정합니다.
- [5] Display : 폰트의 속성을 설정합니다.
설정을 다하신 후 상단의 ‘공개’ 버튼을 눌러 저장을 하시면 사이트에 웹 폰트가 적용된것을 확인하실수 있습니다.