안녕하세요~에코몽입니다 !
제 첫 글 주제는 바로 티스토리 글꼴 설정입니다.
티스토리를 처음 시작하시는 분들이라면
블로그 개설 후 꾸미기, 글꼴 변경 등등 변경 방법에 대해 어려움을 겪으셨을 거예요.
비교적 원하는 글씨체, 크기, 이미지 등 클릭만으로 블로그 꾸미기가 쉬운 네이버 블로그와는 달리
티스토리 블로그는 HTML, RCC 등의 서버 작업을 이용하여 하나하나 나만의 블로그를 꾸며나가야 하는 장단점이 있기 때문인데요~
저 같은 경우에도 티스토리 블로그를 꾸며보기 위해 유튜브, 구글, 네이버, 티스토리 등등 여러 가지 매체를 통해 검색을 하고 따라 해 봤지만 컴맹인 저로써는 막상 적용하기가 쉽지 않더라고요.
또한 다른 블로그에서 보여주는 입력값과 다르게 입력을 해야 하는 경우도 있어서 애를 먹었답니다.
(물론, 손쉽고 빠르게 적용하시고 잘하시는 분들은 있으시겠지만요.)
그래서 저처럼 컴맹이시고 완전 입문용이신 분들을 위해 기본적이고 쉽게 따라 할 수 있게 글을 작성해볼까 합니다.
그럼 입문자분들을 위한 글꼴 변경 시작해볼까요?
(해당 글은 전체 메뉴, 상단 글꼴 변경에 관한 내용이니 이미 알고 계신 분들은 뒤로 가기 눌러주세요.)
(작성자 본인은 크롬을 사용하였습니다.)
1. Google fonts에서 원하는 글꼴 설정하기
제일 먼저 해야 할 것은 바로 글꼴 다운로드하기입니다.
일단 google 또는 daum, naver 등 홈페이지에서 google fonts 검색해서 사이트에 들어가 주세요.
그다음 형광색으로 칠한 부분과 같이 Korean으로 변경해주시고요.
그럼 하단과 같이 한국말로 바뀔 겁니다.
이 중에서 자신이 보기에 제일 맘에 드는 글꼴 고르시면 됩니다.
저는 이 중에서 나눔 고딕체를 사용해보겠습니다.
자, 이렇게 클릭하고 들어오면 아래와 같이 창이 뜰 겁니다.
이 세 가지의 차이는 bold(굵기) 이므로 일반적인 걸 원하시는 분들은 Regular 400 선택하시면 되고요.
저는 개인적으로 굵은 걸 좋아하기 때문에 Bold 700을 선택했습니다.
선택 방법은 (위의 사진) 우측에 형광펜으로 칠해놓은 Select this style을 체크해주세요.
그리고 우측 옆에 글씨와 같이 창이 하나 더 뜰 건데요.
그중 저희는 나중에 블로그에 적용시킬 Embed를 클릭합니다.
그럼 다음과 같이 html, CSS 용 텍스트가 나온답니다. 1번과 2번을 잘 기억해주세요.
GoogleFonts 창은 이대로 내버려둔 채 여러분은 다시 티스토리로 들어오셔서 관리를 누르신 다음에 하단의 사진과 같이 꾸미기 - 스킨 편집 - (우측 상단) - html 편집 순서대로 클릭해주세요.
2. 구글 폰트 티스토리에 적용하기
여기까지 잘 따라오셨다면 이제부터는 헷갈리고 이해가 잘 안 되실 수도 있으니 집중해서 잘 봐주세요.
먼저 Html 창에 밑의 형광펜과 같이 <link rel="stylesheet" href="./style.css"> 문구가 보이실 겁니다.
그 밑에 아까 전에 보여드렸던 googlefonts 사이트에서 1번 텍스트를 복사해서 하단의 형광펜 쳐진 부위 밑에 그대로 붙여줍니다.
다 하셨다면 우측 상단의 '적용' 버튼을 누르고 CSS창으로 넘어와주세요.
하단과 같이 글을 내리다 보면 body { ~~~} 문장이 있을 거고요.
그 안에 font-family ~~ 와 같은 형광펜 부분을 발견하실 수 있을 겁니다.
여기서 여러분은 아까 html에 적용했던 방법과 비슷하게
font- family : '~~', sane-serif; 부분을 모두 지워주시고요.(body는 지우시면 안 됩니다.)
빈자리에 googlefonts 사이트의 2번(font-family: 'Nanum Gothic', sans-serif;)을 복사해서 붙여주세요.
다하셨다면 아까와 같이 적용 버튼을 누르고 새로고침을 누르시면 변경된 화면을 보실 수 있을 겁니다.
3. 최종 정리 및 확인
<전과 후>
이렇게 하시면 기본적인 글꼴 변경 작업 완성이랍니다.
전, 후처럼 글꼴이 바뀐 게 보이시나요~?
생각보다 어렵지 않으셨다면 다행입니다.
저는 컴맹에 다른 블로그 분들과는 다르게 소스가 조금씩 틀린 부분이 있어서 고생을 했네요.
글 내용이 마음에 드셨다면
♥공감과 댓글 부탁드려요♥
♥구독하기도 눌러주세요♥
'Tip' 카테고리의 다른 글
| 티스토리 블로그 썸네일 누락 오류 해결방법 (6) | 2020.05.31 |
|---|---|
| PPT 템플릿을 이용한 티스토리 수익형 블로그 썸네일 만들기 (0) | 2020.05.28 |
| 티스토리 블로그-구글서치콘솔, 네이버웹마스터도구에 등록하기 (1) | 2020.05.26 |
