작성일자
카테고리 워드프레스/워드프레스 일반

워드프레스는 테마가 워낙 다양하기 때문에 일반적으로 사용하는 방법으로 테마를 수정할 수가 없는 경우가 있습니다. 테마에 따라서 스타일시트의 변경만으로 바로 디자인을 변경할 수도 있지만 스타일을 변경하고자 하면 CSS에 대해 잘 알아야 하기 때문에 이를 모르는 분들을 위해 테마 제작자가 테마 옵션을 여러가지 형태로 만들어 그래픽 인터페이스를 제공해서 누구든지 스타일을 쉽게 변경할 수 있도록 하고 있죠. CSS에서 몇가지 코드만 변경하면 될 것을 하나의 페이지를 만들어서 이러한 기능을 제공하고 있는 경우가 대부분입니다. 이러한 기능을 하는 프로그램을 만들려면 PHP로 함수를 만들고 여러가지 복잡한 코드를 사용합니다. 그렇기 때문에 테마 폴더에서 기본적으로 사용되는 style.css는 아래처럼 아무런 내용이 없고 테마 선언을 위한 주석문만 존재하기도 합니다.


Blocked라는 테마인데요. 이처럼 주 스타일시트에 아무것도 없다는 것은 스타일시트가 다른 곳에서 제어되고 있음을 의미합니다. 그래서 위 기본 스타일시트에 CSS를 선언하면 전혀 적용이 안됩니다.



웹페이지의 폰트가 어디서 어떻게 적용되고 있는지 알아보기 위해서 요소검사를 해보니 우측의 스타일시트 패널에서 최상단에 폰트 패밀리가 나옵니다. 적용되고 있는 스타일시트는 없고 localhost:65라고 나옵니다. 그 아래에 스타일시트가 있지만 폰트 패밀리가 다른 곳에서 적용되고 있기 때문에 줄이 그어져있어서 적용이 안된다는 것을 의미합니다. 같은 폰트 패밀리라도 여러곳에서 선언돼있고 가장 우선적으로 적용되는 것이 최상단에 나타납니다. 그렇다면 blocked.min.css 파일이 있는 경로를 찾아서 이 파일에 스타일시트를 선언해도 적용이 안된다는 이야기가 되죠. 이런 경우는 테마의 테마옵션 창에서 설정해야 한다는 것을 의미합니다.



이 테마는 기능이 아주 많아서 여러가지 메뉴가 추가돼있습니다. 대부분 이런 테마는 테마옵션이 외모 메뉴에 있지 않고 별도의 메뉴에 존재하죠. 그래서 여러가지 메뉴를 찾아서 테마옵션이 나오면 클릭해서 들어갑니다.



폰트를 변경하는 곳으로 Typography가 있습니다. 이 탭을 누르면 위처럼 나타납니다. 웹폰트 사용이 활성화돼있고 아래를 보니 메인 폰트로 Open Sans가 선택돼있습니다. 클릭해서 다른 웹폰트를 사용할 수 있는데 찾아보면 나눔고딕은 없습니다. 모두 영문 폰트죠. 그러니 여기서도 설정할 수가 없습니다. 다른 탭을 선택하기 전에 우선 이곳의 웹폰트 사용을 비활성화 하기 위해서 Webfonts enabled에서 No로 선택하고 우측 상단의 Save Settings 버튼을 눌러 저장합니다. 이곳에서 설정된 폰트를 사용하지 않겠다는 의미죠. 그리고 나서 Advanced 탭을 클릭합니다. 다른 곳은 폰트를 설정할 만한 곳이 없습니다.



이곳에 스타일을 변경할 수 있는 CSS 파일이 있습니다. 창이 작으면 우측 하단의 리사이즈 핸들러 클릭 드래그 해서 넓혀줍니다. 



필드 안에 위처럼 입력합니다. 첫번째 줄은 구글 웹폰트 저장소에서 나눔고딕 스타일시트를 가져오는 CSS 규칙입니다. 두번째 줄은 모든 요소를 의미하는 *(Asterisk)를 선택자로 사용하고 폰트 패밀리는 나눔고딕으로 했으며 마지막에 이 규칙을 우선적으로 적용하라믄 !important를 사용했습니다. 별표를 사용하는 이유는 다른 여러가지 선택자에 대해서 다른 폰트가 선언돼있기 때문에 일일히 해당 선택자에 대해서 폰트를 변경해주는 것을 피할 수 있습니다. !important는 스타일시트의 우선 순위 원칙에 의해서 나중에 선언된 스타일시트가 우선 적용되게 되는데 다른 스타일시트보다 위 custom.css가 우선적으로 적용되기 위해서입니다. 위와같이 입력하고 저장버튼을 클릭하면 완벽하게 적용됩니다.



CSS 패널에서 상단에 있는 스타일시트에는 줄이 그어져있고 하단의 스타일시트가 적용돼서 나눔고딕체로 나옵니다.


하나의 테마에 대해서 폰트 변경하는 방법을 알아봤지만 위 방법을 사용하면 어떤 테마라도 폰트를 변경할 수 있을 겁니다.


BlogIcon lovelyeyes

좋은글 감사합니다. 많은 도움이 되었네요.
한가지 질문이 있는데요. 글꼴을 적용하고 나면 화면에 바로 뿌려지는게 아니라 기본설정된 폰트가 보였다가 잠시후 폰트가 재설정 되는 것을 볼 수 있는데요. PC상에서는 좀 빨리 재설정 되지만 모바일 상에서는(특히나 3G폰) 아직 로딩중인지 의심스러울 정도로 느리게 반영되곤 합니다. 이럴 경우엔 어떤 방법이 있을까요? (현재는 기본 폰트만 사용하고 있습니다 ㅠㅠ)

BlogIcon 베누시안

테마에 따라서 나눔고딕 설정하는 방법이 아주 다양합니다. 외모-편집기를 열고 아래처럼 위의 코드를 추가하세요. 주석을 피해서 입력하세요.

*/
@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css" ) ;
* { font-family:"Nanum Gothic" !important ;
}
/*

WARNING! DO NOT EDIT THIS FILE!

BlogIcon lovelyeyes

답변 감사합니다 ^^
완벽하진 않지만 좀 더 연구해봐야겠네요.
좋은 글 잘 보고 있습니다. 도움이 많이 됩니다 ^^

BlogIcon hanil2

알려주신 방법으로 해서 나눔고딕 적용하는 것을 잘 해결했습니다.
감사합니다.
그런데, 한가지 이상한 점이 있습니다.

제가 지금 워드프레스로 홈페이지를 만들고 있는, 제 맥북프로에서는
사파리나 크롬 브라우저에서 적용된 나눔고딕이 잘 보이는데,
저의 다른 윈도우 8 컴퓨터에서는
크롬이나 익스플로러에서 모두,
나눔고딕이 적용되어 있지 않은 모습으로 보입니다.
이런 경우가 가능한가요?
제 맥북에서 작업하는 동안 나눔고딕 적용이 안 되어서 어려웠었는데,
알려주신 방법으로 적용하고 나니까 나눔고딕으로 보이거든요...
근데 왜 윈도우에서는 나눔고딕으로 안 보일까요? ㅡㅡ;;
혹시 이런 경우를 보셨거나, 왜 그런지 아시면, 답을 부탁드립니다.

감사합니다.

BlogIcon 베누시안

URL을 알려줘보세요. 웹표준에 근거하기 때문에 어떤 플랫폼이나 어떤 브라우저라도 동일한 결과가 나와야 하지만 브라우저마다 다른 결과를 출력하기 때문에 다르게 나올 수도 있는데 저도 궁금하니 점검해보겠습니다. 참고로 아래의 글을 보시고 해보세요.

http://martian36.tistory.com/1220

위 방법대로 한 사이트가 아래와 같습니다. 점검해보니 맥이나 윈8 등에서 동일하게 적용되고 있습니다.

http://kopress.org/

BlogIcon 뽀쪼

나눔글꼴로 설정하느라고 아주 애를 먹었는데 설명해 주신방법으로 해결하였습니다. 어느 분이 말씀하신대로 완벽한 해결?은 아니지만 일단 변경됬다는데 의의를 ;;; 제가 쓰는 스킨의 경우는 function.php를 보니 자체적으로 웹폰트를 사용하는 것 같아서 더 수정하기가 힘드네요. 도움 감사합니다 ^^

정헌아빠

안녕하세요
우선 좋은 글을 써주셔서 감사합니다.
위 내용을 동일한 테마인 blocked(ver 1.1.1)에 적용을 하면 작동이 안되네요?
다름 테마에는 잘 작동이 되는데!

참고로 해당 테마를 구매해서 활성화를 시키고 난 후에 바로 적용을 했습니다.
혹시 해당 테마가 유로라서 활성화 이후에 다른 등록절차가 있는 건가요? (사용해보신 테마라서 ^^)

답변부탁드려도 될까요??

BlogIcon 베누시안

안녕하세요. 어떤 분이 이 테마에 나눔고딕을 설정하는 방법을 알고 싶다고 해서 이메일로 받아서 사용법을 올린 것인데요. 이외에도 다른 방법으로 설정할 수 있으니 다음 글을 참고하세요.

http://martian36.tistory.com/1220

정헌아빠

알려주신 페이지로 적용이 잘되었습니다. 감사합니다.

yhnam

글 잘 읽어보았습니다..
워드프레스 갓 입문한 초보인데요
제가 사용하고 있는 테마는 Nimble이라는 테마입니다
본문 내용들의 모든 폰트는 잘 바뀐거같은데 메뉴 폰트만 바뀌지 않습니다
테마옵션 폰트탭에도 설정하는게 없고 커스텀css 입력하는것도 보이지 않구요 ㅠ

BlogIcon 베누시안

위 댓글 링크를 보세요.

티스토리 툴바