블로그를 운영할 때 수익과 방문 수를 늘리는 핵심 요소 중 하나인 '가독성'은, 올리는 방법 또한 다양합니다.
그 중, 가장 쉽고 누구나 할 수 있는 방법인 <폰트 변경> 하는 법에 대해 알려드리려고 합니다.
방법 선택
우선, 방법은 크게 두 가지로 나눌 수 있습니다.
1. 제공되는 소스를 복사해 블로그 CSS 편집 창에 그대로 붙여 넣어 적용하기.
2. 폰트를 다운로드해 알맞은 파일 형식으로 변환한 뒤,
블로그에 해당 파일을 추가하고 CSS 편집에서 코드를 넣어 적용하기.
가장 쉽고 빠른 방법은 1번이지만,
1번의 경우 소스를 제공해 주는 페이지가 문제가 발생했을 시에 바꿔줘야 하는 번거로움 때문에
저는 항상 2번 방법을 사용합니다.
1번 방법
일단 원하는 폰트를 고르기 위해
상업적 이용이 가능하며 무료인 폰트의 소스를 지원해주는 사이트를 들어가야 하는데요.
저는 [눈누]라는 사이트를 추천드립니다.
상업용 무료 한글 폰트 사이트 [눈누] (https://noonnu.cc/)
위 사진과 같이 폰트를 적용해보고 싶은 문구가 있다면
저렇게 직접 작성하여 폰트를 고를 수도 있습니다.
접속을 하신 뒤, 원하는 폰트를 찾아 클릭합니다.
(예시로 저는 네이버에서 제공해주는 '나눔 스퀘어 라운드'를 선택했습니다.)
1번 방법에서는 저 빨간 네모 박스만 있으면 됩니다.
네모 박스 안에 있는 소스를 전부 복사해줍니다.
그 뒤, 블로그 관리의 [스킨 편집] > [html 편집] 메뉴로 들어갑니다.
[CSS] 탭을 클릭해, 원하시는 곳에다가 붙여넣기 해주시면 됩니다.
(되도록이면 나중에도 알아보기 쉽도록 기억하기 편한 곳에 넣어주시면 좋습니다.)
---- 소스에 대한 설명 (궁금하지 않으신 분들은 그냥 넘어가셔도 됩니다.) ----
보기싫게 붙여넣기 된 소스를 시각적인 편의를 위해 우선 줄바꿈 처리해서 설명해드리겠습니다.
font-family는 CSS에서 사용될 '폰트 이름'입니다.
앞으로 CSS에서 해당 폰트를 사용할 때 이 부분에 있는 이름만 적어 간결하게 하기 위함이죠.
src뒤에는 참조할 주소를 적습니다.
때문에 1번 방법에서는 링크를 2번 방법에서는 업로드한 주소를 넣습니다.
font-weigh는 폰트의 굵기,
font-style는 폰트의 스타일(기울임꼴 같은 스타일)이고
이 부분은 그냥 normal로 두시는걸 추천드립니다.
---- 소스에 대한 설명 끝 ----
이제 '정의'를 내렸으니 본격적으로 적용을 시켜야 합니다.
CSS 창에서 아무 곳이나 클릭하여 포커스를 CSS 창으로 맞추고
Ctrl + F를 눌러 (노란색) 검색창을 연 뒤.
'font-family'를 검색하여 바꾸고 싶은 부분의 font-family 오른쪽 작은따옴표 부분을
방금 전 설정했던 font-family로 바꿔 적용시키면 됩니다.
2번 방법
2번 역시 원하시는 폰트를 '눈누' 사이트에서 골라줍니다.
상업용 무료한글폰트 사이트 [눈누] (https://noonnu.cc/)
고르셨으면 폰트 이름 오른쪽의 다운로드 버튼을 클릭하여 다운로드해줍니다.
이 단계에서 주의하셔야 할 점은
폰트마다 다운로드 방식이 조금씩 다를 수 있습니다.
최종적으로 ttf 확장자 파일만 있으면 되기 때문에
exe 실행파일로 설치되는 폰트는 설치 후,
C:\Windows\Fonts 로 들어가 설치한 폰트 파일만 꺼내 주시면 됩니다.
설치한 ttf 확장자 폰트 파일은 웹 폰트로 사용할 수 없기에
woff 확장자로 변경해줘야 합니다.
ttf 에서 woff로 변환해주는 무료 사이트입니다.
Convertio (https://convertio.co/kr/ttf-woff/)
[Convert]를 눌러 변환시켜준 뒤에 변환된 woff 파일을 다운로드합니다.
블로그 관리의 [스킨 편집] > [html 편집] 메뉴로 들어갑니다.
아래 사진의 순서대로 변환시킨 폰트 파일을 업로드해주세요.
업로드를 하신 뒤에는 [CSS] 탭으로 들어가서 원하는 공간에 아래의 소스를 넣으시면 됩니다.
소스.txt
붉은색의 글씨는 본인이 다운로드한 폰트에 맞게 수정하여 넣어주세요.
저의 경우 NanumSquareRoundR 폰트를 예시로 사용했기에
위 사진과 같이 작성하여 넣어줬습니다.
이제 마지막으로 1번과 똑같이
CSS 창에서 아무 곳이나 클릭하여 포커스를 CSS 창으로 맞추고
Ctrl + F를 눌러 (노란색) 검색창을 연 뒤.
'font-family'를 검색하여 바꾸고 싶은 부분의 font-family 오른쪽 작은 따옴표 부분을
방금전 설정했던 font-family로 바꿔 적용시키면 됩니다.
폰트 변경에 대해 기타 궁금한 사항이나 막히는 부분이 있다면
언제든지 댓글이나 이메일을 통해 문의해주세요.
빠른 시일 내에 답변드리도록 하겠습니다.
