워드프레스 폰트 변경과 글꼴 크기 (제목, 본문 등) 설정하는 순서와 방법 #홈페이지만들기 #매뉴얼 #WordPress Font

워드프레스 폰트 설정 작업은 홈페이지를 제작하고 운영할 때 중요합니다. 종종 폰트를 변경하고, 텍스트 크기를 변경하는데 애를 먹는 경우가 많습니다. 이 글에서는 워드프레스 폰트 설정을 위한 여러가지 작업들을 순서대로 설명을 드리겠습니다. 워드프레스는 무료 테마를 사용할 때와 유료 테마를 사용할 때의 설정 방법이나 사용방법이 많이 다르기 때문에 우선은 일반적인 방법에 대해서 말씀을 드립니다.

 

1. 워드프레스 기본 편집기 업그레이드

워드프레스를 설치하고 기본 편집기를 보면 텍스트 편집기 (위지윅편집기) 의 기능이 아주 단순한 것을 알 수 있습니다. 최근에 나온 구텐베르크 편집기 (블록 형태의 편집기) 에서도 여전히 제공해주는 기능이 부족합니다. 기본적으로 폰트 크기나 색상을 변경하는 기능이 없기 때문에, 이러한 기능을 추가하기 위해서는 고급 편집기 기능을 제공해주는 플러그인을 설치해주어야 합니다. 보통 TINYMCE ADVANCED 라는 플러그인을 설치해서 사용하게 됩니다.

• TinyMCE Advanced : 기본 글쓰기 편집기를 업그레이드 해줍니다.
• Black Studio TinyMCE Widget : 위젯의 글쓰기 편집기를 업그레이드 해줍니다.

관리자에서 [플러그인]->[새로추가] 에서 위의 플러그인을 설치해서 추가해주면 기본 편집기에 다양한 기능이 추가된 것을 확인할 수 있습니다. [지금 설치] 버튼을 누르고 설치가 완료되면 [활성화] 버튼을 순서대로 클릭해 주면 됩니다.

설치를 한뒤 새글 쓰기화면을 확인해 보면 구텐베르크 편집기의 경우에는 오른쪽에 텍스트 폰트 사이즈를 변경하고, 색상을 변경할 수 있는 기능이 추가된 것을 볼수 있습니다. 고전편집기를 사용하는 경우에는 편집기 상단의 기능바에서 확인할 수 있습니다.

 

2. 공통 부분의 워드프레스 폰트 크기 변경

폰트 크기는 보통 미리 정의되어있습니다. 웹문서를 작성할 때 사용되는 요소들이 크게 제목 (H1~H6), 본문 (P, SPAN,A) 으로 나누어집니다. 각 요소들의 크기는 테마마다 미리 정해져있습니다. 이 요소들은 따로 변경을 해주지 않아도 되지만, 테마에 따라 정의된 제목의 크기가 너무 크거나 작으면 직접 변경해 줄 수 있습니다. 유료 테마의 경우에는 테마 설정 (테마옵션) 페이지에서 이런 요소들의 크기를 변경할 수 있는 옵션을 제공해 줍니다. 보통 타이포그라피 (TYPOGRAPHY) 라는 탭을 보면 이런 옵션을 볼 수 있습니다. 이런 옵션이 제공되지 않는 경우 (보통 무료테마 사용시), 사용자 정의 CSS 에서 CSS 코드를 이용해서 직접 변경을 해야합니다.

무료 테마의 경우 [테마 디자인]->[사용자 정의하기] 에 있는 추가 CSS 에 아래 코드들을 붙여 넣어주면 됩니다.

h1 { font-size: 24px; }

p { font-size: 12px; }

유료 테마의 경우에는 테마 옵션 메뉴를 찾아서 타이포그라피나 폰트 설정 탭에 가면 크기를 설정하는 옵션을 볼 수 있습니다. 많이 사용되는 테마인, 뉴스페이퍼 테마, 아바다 테마, 엔폴드 테마, 브릿지 테마 등을 보면 대부분 비슷한 곳에 위치하고 있습니다.

 

3. 워드프레스 폰트 추가 및 변경

워드프레스 테마에서 제공해주는 폰트가 대부분 영문 구글 웹폰트이기 때문에 한글 폰트를 사용하려면 폰트를 설치해서 설정을 해주어야 합니다. CSS 사용이 익숙한 분들은 직접 웹폰트를 설정하면 되지만, 그렇지 않은 분들은 한글 폰트를 지원하는 플러그인을 설치해서 사용할 수 있습니다.

현재 한글 폰트를 지원하는 플러그인은 로켓 폰트와 각 폰트별 플러그인이 있습니다. 폰트별 플러그인은 아임굿(iamgood) 이라는 회사에서 제작해서 무료로 배포해주고 있습니다. 이것을 다운로드 받아서 설치해서 사용하면 됩니다.

아임굿 플러그인 다운로드 페이지 : http://www.iamgood.co.kr/archives/6720

최근에는 저작권 걱정없이 상업 목적용으로 사용할 수 있는 폰트를 소개하고, 웹폰트 형태로 제공하는 서비스들이 많이 생기고 있습니다. 대표적으로 눈누 (https://noonnu.cc) 가 있습니다. 이런 곳에서 예쁜 폰트를 찾아서 사용하려면 CSS 를 이용한 추가 방법을 알아야 합니다. 그렇게 어렵지 않으니 아래 순서대로 따라서 테마의 styles.css 파일에 설정해 주면 됩니다. styles.css 파일을 찾기가 어려운 경우 아래 플러그인 중에 하나를 설치해서 그곳에 코드를 넣어주면 됩니다.

• Insert Headers and Footers
• Simple Custom CSS and JS
• Simple Custom CSS


@font-face { font-family: "폰트이름"; src:url(폰트가있는주소); font-weight: normal; font-style: normal; }


그리고 아래 코드들을 추가해 주면 됩니다.

body { font-family: ‘Nanum Gothic Coding’, serif; }

또는

* { font-family: ‘Nanum Gothic Coding’, serif; }

 

더 자세한 내용이 필요한 경우 아래 글들을 참고하시면 됩니다.

• 눈누 서비스 소개글
• 워드프레스 폰트 설치 방법 소개글

 

4. 폰트 관련 HTML 태그와 CSS 코드

• 제목(헤딩) 태그 : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• 본문(일반텍스트) 태그 : <p>, <span>, <a>
• 폰트 관련 CSS 속성 : font-size (폰트크기), font-family (글꼴), color (색상), font-weight (굵기), font-style (스타일)

관련 정보는 아래 사이트들을 참고하시면 좋습니다.

생활 코딩 : https://opentutorials.org/course/3083

W3스쿨 : https://www.w3schools.com/

 

 
Warning: file_get_contents(domain/mp3play.online.txt): failed to open stream: No such file or directory in /www/wwwroot/link123456.online/getlink/index.php on line 27