카페24 폰트 바꾸기에앞서 주의할점이 있는데, 각 폰트마다 라이센스가 있을것이기 때문에 상업적인 이용이 가능한지 아닌지 꼼꼼히 따져보고 폰트를 사용해야 한다는 것이다.
따라서 본글 중간에 여러 폰트를 받을수있는 사이트들을 소개할텐데 각 폰트마다 라이센스관계가 어떻게 되는지 가능한 꼼꼼히 따져보고 폰트를 바꾸도록하자.
카페24 폰트 바꾸기
먼저 홈페이지 폰트를 바꾸기위해서 카페24에 관리자 로그인 이후, 디자인보관함을 통해 스마트 편집기를 열도록 하자. (카페24 관리자 로그인 방법은 본 블로그에 따로 글이 있다.)
본글에선 카페24 기본디자인중 "베이직"을 활용하여 설명을 해보겠다.
"베이직" 디자인의경우 위 이미지처럼 생겼는데, 이미지의 빨간박스 부분의 폰트를 바꾸도록 해보자.
혹여나 디자인 편집기를 여는방법을 모르겠다면, 카페24 관리자 로그인(본 블로그에 방법이 있음,)-> 대시보드의 "다자인"클릭->"디자인보관함"클릭-> 수정하고자 하는 디자인의 "편집"버튼을 클릭하면
위 이미지와같이 디자인 편집기가 열리게된다. 이제 폰트를 변경하기로한 "전체게시판" 부분에 마우스 포인트를 올리면
이런창이 뜨게되고 그상태에서 "편집"버튼이 아닌 그냥 편집버튼이 아닌 부분의 불투명한 네모박스 아무곳이나 클릭하자.
그러면 알아서 해당하는부분의 코드를 위 이미지와 같이 찾아준다. 이제 여기서부터 폰트를 바꿔볼텐데 먼저 폰트를 찾아야한다.
폰트 사이트는 여러가지가 있는데 본글에선 구글폰트/눈누 링크를 남겨두겠다.
위사이트중 아무 사이트나 접속하면
이런식으로 여러 폰트들이 보일것이다. 이곳을 탐색해서 원하는 폰트를 찾게되면 해당하는 폰트를 클릭하자.
본글에선 직관적으로 변화되는것을 보여주기위해 위 폰트를 예시로 설명할것이다. 이렇게 해당하는 폰트를 클릭하여 폰트 페이지로 접속하면 위 이미지와 같은 화면이 보이는데 여기서 우측 상단의 "웹폰트로 사용" 부분을 전부 복사하자.
다시 스마트 편집기로 돌아와서, 바꾸고자 하는부분에 class가 지정되어있지 않아서 "fontcg"라는 임의의 클래스를 지정해주도록 하자. (폰트를 바꾸고자 하는 부분이 이미 class가 정의되어 있다면 이렇게 따로 이름을 새로 지정해줄 필요는 없다. / class의 이름은 중복되지 않으면 알파벳으로 자유롭게 지정해도 된다.)
그리고 위 이미지를 보면 <!--@css ~~~~ 하는 부분이 보일텐데 해당하는 부분에 마우스를 올리면 [파일열기] 버튼이 보일것이다. [파일열기] 버튼을 눌러 css 파일을 열도록하자.
파일을열면 위 그림과같이 css파일이 열릴것이다. 이제 여기에 위에서 복사해두었던 "웹폰트로 사용" 의 코드를 복붙하면 된다. 대충 가독성있게 맨위에 복붙을하면 될것이다.
위 이미지와 같이 복사한 내용을 최상단에 복붙을 한것이다. 해당하는 코드를 복붙하면 끝나는것이 아니고, 이제 불러온 코드를 원하는 부분에 입혀줘야하는데 그게 위 이미지에서 보이는 8~10번째 줄이다.
해당하는 코드를 설명하자면 html 페이지에서 class=fontcg 라는 이름을 주었고, fontcg 라는 부분의 폰트를 변경하고 싶은것이니
.fontcg{} 라고 css코드를 연결시켜주는 것이다. 그리고 중괄호안에 변경하고자하는 css 스타일 코드를 입력하면된다.
여기서 font-family: "불러오고자하는 폰트이름", sans-serif; 를 입력하면 된다.
불러오고자하는 폰트 이름은 위 이미지를 보면 알겠지만 복붙한 코드에서도 확인할수있고 폰트 페이지에서도 확인할수있을것이다.
이 과정까지 완료하여 css,html전부다 저장을 하고나면,
이렇게 정상적으로 폰트가 바뀐것을 확인할수 있을것이다.
카페24 폰트를 변경하기 위해선 불가피하게 html,css 코드를 손봐야하기 때문에 잘 모르는 사람에게는 어려운 작업일수도있다.
따라서 꼭 당부하고싶은 내용은
- 무턱대고 바로 본인 홈페이지에 적용하기보단 카페24 기본제공 디자인에 충분히 연습을해서 충분히 터득한 이후에 실행하도록 하자.
2. 본인 홈페이지에 적용하기에 앞서 본인 홈페이지 코드를 FTP 등등을 활용하여(FTP연결법은 본블로그 다른글에 개재되어있다) 확실하게 백업을 하고나서 작업하자.
3. 폰트 라이센스는 꼭 확인하자. 라이센스 확인을 하지않아 발생하는 문제는 본인이외에 아무도 책임져줄수가 없다.