티스토리 블로그 폰트 변경
이제 본격적으로 티스토리 블로그를 사용해보고자 하는분들은 블로그 스킨도 변경해보고 html, css등을 왔다갔다 하면서 공부도하고 적용시켜보면서 재미를 느끼고 계시겠죠? 이번시간에는 폰트를 변경하고싶은데 어려워서 적용하지 못하는 분들을 위해서 간단하게 폰트를 적용하고 더욱 맘에 드는 모습으로 바꿔보는 방법을 알아보겠습니다.
폰트 변경 방법
1. 가장 먼저 웹폰트를 제공하는 사이트를 찾아 웹폰트적용소스코드를 받아야 합니다. 저는 눈누사이트에서 제공하는 웹폰트를 사용해보겠습니다.
눈누 사이트 바로가기
2. 눈누사이트에 접속한 후 원하는 폰트를 검색해보세요. 무료로 제공되는 다양한 폰트를 만날 수 있습니다. 저는 고딕류의 본고딕체를 좋아하기 때문에 본고딕을 검색하였습니다.
3. 본고딕체는 사실 미넴스킨의 기본폰트로 적용되어 있는데 데미라이트체로 적용되어 기본적인 본고딕보다 얇은 서체로 제가 원하는 폰트가 아니여서 원래 본고딕체를 적용하려고 합니다. 미세한 차이지만 저는 그냥 본고딕이 좋더라구요.
4. 글꼴의 모양을 확인한 후에 우측의 웹폰트로 사용에 있는 소스코드를 복사하세요. 네모두개 겹쳐있는 아이콘을 클릭하면 간단하게 복사할 수 있습니다.
5. 이제 티스토리 블로그의 관리페이지에서 꾸미기 > 스킨편집 메뉴를 클릭하세요.
6. html편집을 누르고 CSS편집창으로 이동하세요. 가장 상단에 @charset "utf-8";이 보입니다. 그 바로 아래에 조금 전 복사한 소스코드를 붙여넣기 해줍니다.
아래의 이미지를 확인해보세요. 복사한 소스코드를 적용한 모습을 확인할 수 있습니다. 소스코드앞에 /* 글내용 */ 이렇게 소스코드를 알아볼 수 있는 문구를 마음대로 넣어서 알아보기 쉽게 적용할 수 있으니 원하는대로 넣어보세요.
7. 이제 html편집페이지로 이동하세요. 편집창에 마우스로 아무곳에나 클릭한 후 Ctrl+F키를 동시에 눌러 검색창을 연뒤에 font-family 를 검색하세요. 녹색으로 표시되는 문자를 찾을 수 있습니다.
8. 이제 아까 복사한 소스코드중 폰트이름을 따로 복사하세요. 저는 Noto Sans KR이 폰트이름이네요. 이 글을 복사한 후에 "Noto Sans KR", 로 만들어줍니다. 미리 이렇게 글자앞에 "",를 넣어주면 작업하기에 편리하니 이렇게 만들어주는겁니다.
9. 이제 만들어둔 폰트이름 "Noto Sans KR", 를 화살표 이름 앞에 모두 붙여넣기 해줍니다. 이 폰트를 내 블로그 곳곳에 사용하겠다는 뜻입니다.
10. 앞에 새로운 폰트이름을 적용한것이 보이시나요? 이렇게 적용하고 나면 모든 과정이 끝이 납니다. 적용을 누르고 잘 적용 되었는지 확인해보세요.
관련글
이 글과 비슷한 관련 카테고리의 글을 함께 읽어보세요. 도움이 되는 정보가 많이 준비되어 있습니다.
티스토리 블로그 대표이미지를 본문에서 안보이게 설정하는 방법
대표이미지를 안보이게 설정하기 티스토리 블로그를 하다보면 대표이미지를 설정은 해야겠지만 글에 대표이미지가 보이게하고 싶지않은 경우가 있습니다. 그리고 페이지 로딩때문에도 대표이
commagun.tistory.com
티스토리 블로그에 PDF파일을 바로 보여주는 간단한 방법
PDF파일 바로 보여주기 방법 티스토리 블로그를 하다보면 PDF파일을 그냥 파일로 올리기 보다는 파일자체를 열지않고 바로 웹상에서 확인하게 해줄 수 없을까? 생각해봅니다. 이럴때 유용하게 사
commagun.tistory.com
티스토리블로그 - 이전 발행 글 넣기를 새창 열기에서 현재창 열기로 바꾸는 간단한 방법
이전 발행 글 넣기 이전 발행 글 넣기를 현재창으로 넣고 싶은 분들은 이 글을 주목해 주세요. 티스토리 블로그에 글을 쓰다 보면 플러그인 > 이전 발행 글 넣기를 하게 되는 경우가 있습니다. 구
commagun.tistory.com
참고하세요
· 블로그 상단의 구독하기버튼을 누르시면 제 블로그의 새글을 바로 받아볼 수 있습니다.
· 방문하시는 여러분의 ♥공감 하나와 댓글 하나가 저에게는 큰힘이 될 수 있습니다.
· 이 글에는 다양한 어필리에이트 활동으로 수익금을 지급받을 수 있는 링크가 있습니다.
· 이 글은 티스토리블로그 카테고리에 위치하고 있습니다. 비슷한글을 보시려면 아래를 확인하세요.
'블로그정보' 카테고리의 다른 글
| 'SeoPro' 깔끔하게 정돈된 느낌의 구글블로그테마 (4) | 2023.09.26 |
|---|---|
| '구글블로그' 본문내 이미지 모퉁이 라운드효과 적용하기 (1) | 2023.09.14 |
| 티스토리블로그 미넴스킨의 H2, H3 제목앞에 바 제거하는 팁 (2) | 2023.07.14 |
| 티스토리블로그 - 형광펜효과 주는 html소스코드 (2) | 2023.04.25 |
| 티스토리 블로그 대표이미지를 본문에서 안보이게 설정하는 방법 (2) | 2023.04.13 |
| 티스토리 블로그에 PDF파일을 바로 보여주는 간단한 방법 (3) | 2023.04.11 |
| 티스토리블로그 - 이전 발행 글 넣기를 새창 열기에서 현재창 열기로 바꾸는 간단한 방법 (3) | 2023.03.19 |
| 티스토리블로그 - 관리페이지의 플러그인 네이버 애널리틱스를 설치하고 활용하기 (2) | 2023.03.19 |
댓글