여러분, 티스토리에 있는 기본 폰트
종류가 정말 적지 않나요? ㅎㅎ
처음에는 저도
그냥 있는 거나 써야지~ 했다가
블로그를 생각보다 꾸준히 하게 돼서
글씨체에 변화를 주고 싶었어요!
전체적인 폰트도 바꾸고 싶고
강조하고 싶은 부분에는
조금 더 화려한 느낌으로 포인트를 주고 싶었죠!
그럼 과연 어떻게 바꿀까요?
웹 브라우저에서 폰트는 보통
CSS / HTML 안에서 변경할 수 있답니다.
대부분의 경우 CSS를 통해서 하지만,
HTML에서도 가능은 하답니다.
아주 고맙게도,
티스토리는 유저들에게
CSS와 HTML을 접근을 가능하게 해 줘요!
그게 어디 있는지 알려드릴게요~
물론 효율적으로 폰트 적용을 시키려면,
클래스 같은 것도 알아두면 좋지만,
제일 쉬운 방법으로 알려드리려고
조금은 수동적이고 귀찮은 버전 알려드릴게요!
사실 다른 티스토리에
이미 비슷한 내용 올려두긴 했는데
그 포스팅에는 굵기, 밑줄 등등
폰트 꾸미는 다른 방법도 함께 적었었어요~
그건 좀 보시는 분들이 이미
티스토리 메뉴만으로도
충분히 변경 가능한 부분이라
폰트 적용만 따로 정리하려고 해요.
바로 블로그 관리 페이지를 들어가셔야 합니다!
데스크톱이나 노트북 켜시고
티스토리 블로그에 오시면,
오른쪽 상단에 프로필 보이실 텐데,
그걸 누르면 블로그 글쓰기 아이콘과
설정 아이콘 버튼이 있을 거예요~
거기에서 설정 버튼 눌러주세요!
만약 바로 블로그 관리 페이지가 보이면,
아래와 같은 화면이 보일 거예요!
그러면 블로그 관리의 왼쪽 세로 메뉴에서
꾸미기를 찾으신 후에 스킨 편집을 눌러주셔야 합니다.
쉬운 설명을 위해서 동영상 첨부할게요
그러면 새로운 페이지가 등장할 거예요,
우린 바로 여기에서 폰트 적용을 해볼 겁니다.
그럼 그걸 어떻게 바꾸느냐?
어렵지 않습니다 :)
폰트는 보통
@import 혹은 <link>
2가지 방법을 통해서 변경해요!
두 가지 방법을 다 설명하게 되면
포스팅이 너무 길어질 것 같아서
오늘은 제 생각에 더 쉬운
<link> 방법 이용해서 알려드릴게요!
1. Google Fonts에서 사용하고 싶은 폰트 찾기
자 우선 적용하고 싶은 폰트를 정하세요!
다만, 웹폰트 형태로 존재해야 해서
우리는 누군가 서버에 올려준 웹폰트 링크를
그대로 가져다 쓸 거예요!
대부분의 유명한 폰트나 많이 쓰시는 폰트는
이미 웹폰트 형식으로 변환이 많이 되어 있어서
검색해보시면 나오는 경우가 많습니다 :)
간혹 찾아도 안 나오는 아이들은
가지고 있는 폰트 파일 이용해서
웹폰트 변환하시는 분들도 계신 것 같은데
전 그걸 안 해봐서 일단 있는 걸 가져다 쓸 거예요.
Google Fonts에 아주 많거든요!
Google Fonts 사이트에 있는 폰트들은
개인 사용 및 상업적 사용이 모두
무료라고 해서 좋아요!
그래도 혹시 상업적 용도로
디자인 작업하실 때는
한 번 더 라이선스 확인하시는 거 추천드려요!
단점이라면,
한글 폰트는 영어 폰트에 비해
아무래도 좀 적긴 해요~
그래도 쓸 만한 것들은 많기 때문에
눈팅 잘해보셔요 ㅎㅎ
만약 한글 폰트 중에 선택하실 거라면
아래 이미지처럼 노란색 부분에서
Language 클릭하시고 Korean 체크하세요!
그러면 쭉 둘러보시면서
마음에 드시는 포인트를 선택하시고
해당 폰트가 보이시면 클릭하세요.
저는 그냥 보여드리는 거라서,
첫 번째 줄, 왼쪽에서 세 번째에 있는
Ranchers 폰트 선택했어요.
2. 원하는 폰트에서 필요한 코드 찾기
클릭하면 바로 아래 화면이 나오는데
저처럼 노란 박스 표시한 +Select this style 누르시면
그 아래 이미지처럼 오른쪽에 뭔가 짜잔 나올 거예요.
만약에 아무 화면 나오지 않으면,
제일 위 상단 맨 오른쪽에 위치한 네모난 아이콘에
저처럼 빨간 점이 생겼을 거거든요?
바로 그 부분 클릭해주셔도 돼요~
거기에서 제가
빨간색 박스로 표시한 부분이 중요해요.
3. 찾은 코드를 붙여 넣기
잘 찾으셨으면, 이 화면은 그대로 두시고
우리가 아까 블로그 관리 페이지에서
스킨 편집 눌렀던 곳으로 와주세요.
거기에서 html 편집을 눌러주세요~
그러면 이런 화면이 있어요~
아마 사용하시는 스킨마다 조금씩 생김새는 다를 텐데
여기서 보셔야 하는 부분은 블러 바로 위에 있는 <head>에요.
블러 처리한 곳 사이에
제가 드래그한 노란 박스 보이시나요?
우리가 바로 전에 찾아놓은 폰트 코드를
이제 여기서 활용합니다.
빨간색 박스가 두 개 있었는데
더 위에 있던 코드,
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Ranchers&display=swap" rel="stylesheet">이걸 그대로 복사해서
<head>와 </head> 안에 붙여 넣었어요.
헷갈리시면, 그냥 </head>를 찾으시고
그 앞 줄에 여러분이 찾은 코드를 붙여 넣으세요!
이 작업은 다운로드한 폰트를
여러분이 사용하시는 Windows 속 Fonts 폴더 안으로
넣는 거랑 비슷해요.
즉, 이제는 모든 준비는 완료되어
원하는 곳을 정해서 적용만 하면 됩니다!
4. 폰트 적용하기
폰트를 적용하는 차례인데요,
여기서 두 경우가 있어요.
기본 서체를 바꾸겠다를 원하시면,
<style>
body {
font-family: 'Ranchers', cursive;
}
</style>이렇게 <style> </style>을 작성하고
그 사이에 body {...}를 추가하신 후,
여러분이 선택했던 폰트에서
제가 두 번째로 빨간 박스로 표시했던
그 부분에 해당하는 코드
즉, font-family로 시작하는 걸 ...에 붙여 넣으세요~
이때, <style> </style> 역시
</head>보다 위에 있어야 한다는 거 기억해주세요!
헷갈리시면,
제 코드 그대로 복사 붙여 넣기 하시고,
글씨체 부분만 바꾸셔도 됩니다!
그게 훨씬 편하겠죠? ㅎㅎ
그러면 포스팅 올릴 때,
기본 서체로 폰트 변경을 안 해도
여러분이 위에 설정한 대로 기본 폰트가 변해요.
저 같은 경우에는,
기본 폰트를 에스코어드림이라는 폰트로 설정해놔서
모든 포스팅에 별다른 작업을 안 해도
예외 없이 적용 잘 되어 보입니다.
자, 이번에는 부분적으로
포스팅 내부에서 중요한 부분을 정해서
포인트로만 폰트를 적용하고 싶다면?
그럴 때는 조금 달라요 ㅎㅎ
이때 제일 쉬운 방법은
포스팅 작성 페이지로 와서 할 수 있어요.
네 줄로 글씨체 단어들만 적어보았어요.
여기서 제가 노란색 표시한 기본 모드를 누르시고
HTML을 클릭해주세요!
그럼 화면이 이렇게 전환됩니다.
이게 뭐지 싶으신 분들도 있지만,
자세히 보시면
제가 적었던 단어들이 <p></p>에 감싸진 형태로
줄이 나눠진 게 보이실 거예요.
저 같은 경우에는 제가 웹폰트 적용한 게
4 종류 정도 되길래,
여러분께 보여드리고자 이렇게 4가지 각각 적용했어요.
보시면 <p></p>안에 공통적으로 들어간
style="font-style: ..."가 보이실 거예요!
아까랑 뭔가 비슷하지 않나요?
맞아요!
아까 두 번째 빨간 박스 우리가 복사해 봤었죠?
아까처럼 여러분의 폰트를 ...부분에 붙여 넣어 보세요!
그러면 짜잔~
이런 결과가 나오게 되는 거예요!
신기하지 않나요?
(모바일에는 적용 안될까바 사진으로 올립니다!)
위에서 말씀드린 것처럼
포인트로 폰트를 적용할 때도 스킨 편집에서도 할 수 있지만
초보 분들은 여기서 이렇게 인라인 방식으로 적용하는 게
훨씬 쉬워요~
위에서 전체 폰트를 바꾸는 건
스킨 편집 안에서 적용하는 방법을 안내해드렸는데
이것도 당연히 포스팅 페이지에서 가능해요.
근데 다들 블로그 포스팅
짧게 하시는 거 아니시잖아요ㅠㅠ
제 포스팅만 해도 50줄은 거의 대부분 넘는데
이걸 일일이 모든 문장마다 붙인다면
포스팅하기 싫어질 것 같습니다.. ㅎㅎ
나중에 HTML과 CSS에서
클래스를 공부하시면
포인트로 폰트 적용하는 것 역시
스킨 편집에서 하실 수 있어요!
오늘 제가 작성해본
폰트 적용 방법 어떠셨나요?
아마 처음 따라 해 보신다면 복잡하실 수도 있지만,
여러 번 반복해서 다양한 폰트를 적용해보시면
생각보다 굉장히 간단하기 때문에
무리 없이 사용하실 수 있을 거예요 ㅎㅎ
사실 원리를 설명한 블로그는 많지만,
원리만 말아서는 실행을 못할 때가 많잖아요.
직접 완성해보면 그 성취감 때문에
더 공부하고 싶은 자극도 되고 ㅎㅎ
그래서 오늘은 아무것도 몰라도
그냥 따라만 하면 되는 그런 글을 작성해봤어요.
아주 간단하게 정리하면
원하는 폰트를 찾아서 웹폰트 링크를 복사해서
포스팅 내 HTML 혹은
블로그 관리에서 스킨 편집에
해당 코드를 붙여 넣기 하면
완성인 거죠!
혹시 이 방법으로 하셨는데 안됬다고 하시면
댓글 달아주세요 ㅎㅎ
앗 그리고 포스팅이 너무 길어지는 바람에,
제가 아직 @import방법은 설명을 안 드렸어요 ㅎㅎ
오늘 가르쳐드린 방법이
조금 더 간단한 것 같아서
먼저 소개해드렸구요,
다음번에는 @import를 이용해서
폰트 추가해서 적용하는 방법을 가지고 오겠습니다!
긴 글 읽어주셔서 정말 감사해요!
도움이 되셨다면 공감 부탁드립니다!
'ℹ️ INFORMATION' 카테고리의 다른 글
| 하트 이모티콘(특수문자) & 꽃 이모티콘(특수문자) 모음 (0) | 2021.03.22 |
|---|---|
| [구글 드라이브] 이미지에 있는 글자 따로 텍스트로 추출하기! (OCR 완전 쉬운 꿀팁) (0) | 2021.03.17 |
| 미국의 2021년 공휴일과 미국 증시 휴장 및 조기 마감일은 언제일까? (long weekend 뜻 & 썸머타이 시작과 끝) (0) | 2021.02.15 |
| 2021년 설날 이후 법정공휴일은? (대체공휴일 및 보권선거일) (0) | 2021.02.12 |
| "당신의 컬러는?" by 케이테스트 (퍼스널 컬러 테스트/ 성향 테스트/ 성격 테스트) (0) | 2021.02.06 |