워드프레스 웹사이트의 글꼴을 바꿔보고 싶었던 적이 있으신가요? 커스터마이저에서 새 글꼴을 선택하는 것 자체는 어렵지 않습니다. 하지만 테마에 기본 포함되지 않은 글꼴을 사용하고 싶거나, 변경하려는 요소에 글꼴 옵션이 아예 없을 때 문제가 발생합니다. 이 글에서는 플러그인과 브라우저 확장 프로그램을 활용해 워드프레스 테마의 어떤 글꼴이든 자유롭게 변경하는 방법을 단계별로 소개합니다.
커스터마이저에서 글꼴 변경하기
더 많은 글꼴을 사용하려면 먼저 Easy Google Fonts 플러그인을 사이트에 설치해야 합니다.
- 플러그인 → 새로 추가 메뉴로 이동합니다.
- 검색창에 “Easy Google Fonts”를 입력합니다.
- 설치를 클릭한 후 활성화합니다.
- 이제 사이트에 훨씬 더 많은 글꼴 옵션이 추가됩니다. 변경하려면 커스터마이저(외모 → 사용자 정의)로 이동합니다.
- Typography → Theme Typography를 클릭합니다.
- 드롭다운 화살표를 클릭하고 아래로 스크롤하면 선택 가능한 글꼴이 크게 늘어난 것을 확인할 수 있습니다.
- 원하는 글꼴을 클릭해 선택하면 끝입니다.
플러그인을 사용해 테마에서 이미 커스터마이징 가능한 텍스트의 글꼴을 바꾸는 것은 매우 간단합니다. 문제는 특정 텍스트를 다른 글꼴로 바꾸고 싶은데 그런 옵션 자체가 없을 때 발생합니다!
이 경우 해당 부분의 CSS 코드를 직접 수정해야 합니다. 하지만 이 코드는 숨겨져 있기 때문에 먼저 위치를 찾아내야 합니다.
필요한 확장 프로그램 설치하기
구글 크롬 브라우저에서 WhatFont라는 확장 프로그램을 검색해 설치하고 실행을 허용합니다.
WhatFont가 활성화되면 어떤 웹사이트에서든 발견되는 모든 글꼴을 식별해 줍니다. 마음에 드는 글꼴을 발견해서 내 사이트에도 적용하고 싶다면, WhatFont가 켜진 상태에서 해당 텍스트 위에 마우스를 올리기만 하면 글꼴 이름이 표시됩니다.
다음으로 설치·활성화할 확장 프로그램은 Firebug Lite입니다. 이 도구는 사이트 코드를 표시하고 CSS 속성을 실시간으로 편집할 수 있게 해 줍니다. 코드 속에서 텍스트의 위치를 찾아 글꼴을 쉽게 확인하고 변경할 수 있습니다.
현재 사용 중인 글꼴 찾기
테마가 현재 사용 중인 글꼴의 이름을 알아내려면 다음 순서대로 진행합니다.
- 아이콘을 클릭해 WhatFont를 활성화합니다.
- 식별하고 싶은 글꼴 위에 마우스를 올립니다.
- 표시된 글꼴 이름을 기록해 둡니다.
- WhatFont를 끕니다.
다음 단계는 해당 글꼴이 선언된 CSS 코드의 위치를 찾는 것입니다.
- 앞서와 같이 커스터마이저를 엽니다.
- Firebug Lite(드라이버가 꽂힌 벌레 모양 아이콘)를 실행합니다.
- Firebug가 활성화되면 화면 하단에 사이트 코드가 표시됩니다.
이 코드를 다룰 때는 특히 CSS에 익숙하지 않다면 매우 신중해야 합니다. 다만 지침을 잘 따르면 사이트를 망가뜨리지 않고도 충분히 글꼴을 변경할 수 있습니다. 진행하기 전에 반드시 사이트를 백업해 두는 것이 좋습니다.
이제 변경하려는 텍스트의 현재 글꼴 위치를 찾아보겠습니다.
- CSS 탭을 클릭합니다.
- style.css 파일을 선택합니다. (파일이 상당히 깁니다.)
- Ctrl + f를 누른 뒤 기록해 둔 글꼴 이름을 검색창에 입력합니다.
- 예시에서는 Helvetica를 검색했으며, style.css 내 해당 글꼴의 위치가 주황색으로 표시됩니다.
- 글꼴이 선언된 위치를 드래그해 복사합니다. 위 이미지에서 노란색으로 표시된 부분입니다. 같은 글꼴이 여러 곳에 선언되어 있다면 그중 하나만 복사하면 됩니다.
폰트 컨트롤 만들기
폰트 컨트롤(Font Control)은 플러그인에게 “CSS의 어느 위치에서 우리가 바꾸려는 글꼴이 사용되는지”를 알려주는 역할을 합니다. 이 단계는 시행착오가 필요할 수 있으며, 특히 대상 글꼴이 사이트의 여러 곳에서 사용되고 있다면 더욱 그렇습니다.
- 관리자 패널로 돌아가 설정 → Google Fonts를 클릭합니다.
- “Create a new font control”(새 폰트 컨트롤 만들기)을 클릭합니다.
- 새 글꼴이 적용될 위치를 알 수 있도록 이름을 지정합니다.
- CSS 목록에서 복사한 위치를 CSS selectors(CSS 선택자) 입력란에 붙여넣습니다.
- Force Styles override 체크박스를 선택합니다.
- 저장(Save)합니다.
결과 확인하기
커스터마이저로 돌아가 글꼴을 변경하고 싶은 항목을 찾습니다. 방금 생성한 폰트 컨트롤의 드롭다운 목록을 열고 원하는 글꼴을 선택합니다. 정상적으로 작동했다면 클릭하는 즉시 글꼴이 변경됩니다.
만약 작동하지 않는다면 폰트 컨트롤로 돌아가 붙여넣었던 선택자를 삭제하고, 원래 글꼴이 선언된 CSS의 다른 위치를 사용해 다시 시도해 보세요. 몇 번의 시도 끝에 성공하는 경우가 흔합니다.
흔히 쓰이는 테마를 사용하더라도 워드프레스 테마의 모든 글꼴을 자유롭게 변경할 수 있다면 사이트에 독특한 개성을 더할 수 있습니다. 사이트가 최신 버전으로 제대로 업데이트되어 있는지 확인한 후, 지금 바로 시도해 보세요.