블로그를 꾸밀 때 수고 대비 가장 큰 효과를 볼 수 있는 걸 찾아본다면
바로 블로그의 폰트를 바꾸는 게 아닐까 싶다.
지금 쓰는 스킨도 새로 만든 것이 아니라
기존의 티스토리 스킨인 Book Club스킨에서 하나 둘 고친 것이다 보니
기본 스킨에서 솔직히 큰 차이는 없달까?
(아무리 이것저것 뜯어고쳐봤자 전체적인 구조가 변하질 않았으니ㅠ)
그래서 스킨을 입히자마자 처음 시도한 건 바로 폰트 바꾸기~
일단 무료 한글 폰트 사이트에 접속한다.
이미 알 사람은 다 아는 무료 한글 폰트 사이트 '눈누'.
무료 한글 폰트가 귀하디 귀한 요즘 같은 때에 상업적 이용도 가능한 데다가,
폰트를 직접 다운로드할 수도, 또는 웹 폰트로도 마음껏 사용할 수 있어서
한글 폰트가 필요할 땐 무조건 뒤도 안 보고 달려가는 곳이다.
눈누에 접속해 보면 이렇게 추천 폰트가 첫 화면에 뜨는데
일단 무시하고 두 번째 메뉴인 '모든 폰트'를 클릭!
모든폰트 메뉴로 들어가 보면 스크롤을 쭉쭉 내리면서 모든 폰트를 볼 수 있는데
보다 보면 생각보다 무료 폰트가 많다...!
그래서 항상 주황색으로 표시한 체크박스를 활용하는 편인데
손글씨의 경우 웹에서 가독성이 상당히 떨어지기 때문에
난 주로 손글씨는 체크 해제를 하고 고딕, 명조 위주로 폰트를 찾곤 한다.
그리고 각 폰트당 예제로 문구가 있긴 하지만
아무래도 같은 문구일 때 비교가 더 쉽기 때문에
이렇게 같은 문장으로 만들어 놓고 폰트를 살펴보면 좋다.
그리고 지금 보이는 '카페24 고운밤'처럼
자주 사용하는 특수문자가 없는 폰트가 몇 있기 때문에
간단한 문구 + 자주 쓰는 특수문자로 폰트를 찾으면 좋다.
(카페24 고운밤은 약간의 손글씨 느낌이 나는 명조이면서
가독성도 떨어지지 않아서 지금 사용하고 있긴 하지만
특수문자 지원이 안 되는 게 너무 아쉽다ㅠㅠ)
어쨌든 이런 방식으로 마음에 드는 폰트를 찾은 뒤 이름을 클릭해준다.
이름 옆에 보면 다운로드 버튼이 있어서 문서나 포토샵, 일러스트에서도 사용 가능하지만
지금은 블로그를 꾸밀 웹 폰트가 필요하기 때문에
웹폰트로 사용 옆의 복사하기를 클릭해준다.
그리고 이제 티스토리의 블로그 관리로 들어가서
스킨 편집 > html 편집 > CSS를 눌러 css문서로 들어간다.
그럼 이렇게 @import 또는, @font-face가 보이는데
이 밑으로 방금 복사했던 코드를 그대로 붙여 넣기 한다.
그리고 그 밑의 34번째 줄에 보이는 body의 font-family 중 첫 번째
'AppleSDGothicNeo'를 내가 바꾸려는 폰트의 이름, 'CookieRun-Regular'로 바꿔준다.
**그 뒤로 'Noto Sans KR', sans-serif가 연이어 보이는데
두 번째의 'Noto Sans KR'은 첫 번째 폰트가 무슨 이유로든 적용이 안 될 때 적용하는 폰트,
그리고 마지막 sans-serif는 두 번째 폰트마저도 적용이 안될 때
산세리프체(명조체 같은 삐짐이 없는)를 적용하라는 표시다.
그리고 적용을 누르고 새로고침을 눌러주면
이렇게 기본 서체에서 쿠키런 Regular로 폰트가 바뀐 걸 볼 수 있다 :)
그런데 어라?
타이틀은 바뀌지 않았다. 심지어 기본 중의 기본인 명조체라니.
이 타이틀까지 바꾸려면 다시 html 편집 > CSS로 들어가서
마찬가지로 #header h1의 font-family도 바꿔주면 된다.
(스킨이 달라도 h1이 타이틀일 가능성이 99.9%이니 ctrl + f를 눌러서 h1을 찾자!)
그럼 타이틀을 포함해 블로그의 모든 서체가 바뀌었다.
이 정도면 노력 대비 효율 1000000%인 듯!
'블로그 꾸미기' 카테고리의 다른 글
[티스토리 스킨 편집] 글 제목(타이틀) 가독성 높이기 (0) | 2020.12.20 |
---|---|
[티스토리 블로그] 파비콘 적용하기 (0) | 2020.11.22 |
[티스토리 스킨 편집] 스크롤 진행률 표시줄(scroll indicator) 만들기 (5) | 2020.10.30 |
블로그 다크 모드를 만들다. (13) | 2020.10.16 |
[티스토리 스킨 편집] 상단 메뉴 없애기(초⭐️간단!!) (1) | 2020.10.15 |
[티스토리 스킨 편집] top 버튼 꾸미기(CSS3 animation) (17) | 2020.10.12 |
[티스토리 스킨 편집] 스크롤시 배경 고정하기 (0) | 2020.09.19 |
티스토리 블로그 꾸미기 시작! (0) | 2020.09.18 |
댓글