운영 워드프레스

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

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

 

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

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

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

워드프레스 wordpress 폰트 변경 글꼴 크기 제목 본문 설정하는 순서 방법 홈페이지만들기

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

워드프레스 wordpress 폰트 변경 글꼴 크기 기본 편집기 업그레이드 플러그인

 

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

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

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

h1 { font-size: 24px; }

p { font-size: 12px; }

워드프레스-폰트크기-사이즈-변경방법-css이용-코드-무료테마2

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

폰트크기-사이즈-변경방법-유료테마-테마옵션-뉴스페이퍼

 

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

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

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

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

워드프레스-한글폰트-플러그인-설치-변경-로케트-폰트

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

 

 

Related posts

워드프레스 페이지 빌더로 홈페이지 쉽게 만들기 – 추천 빌더 종류 비교 정리 (유료, 무료) #비주얼콤포저 #엘레멘토 #사이트오리진 #디비빌더

스마일보이랩

테마포레스트 베스트셀링 워드프레스 플러그인 25개 (2019년)

스마일보이랩