안녕하세요! [티스토리 블로그 만들기]입니다.
지금까지
블로그 홈프로모션도 삭제하고
정사각형 프로필도 만들어보고
프로필 크기도 줄여봤지만
그럼에도 뭔가 항상 애매하게 마음에 들지 않았었는데요....
그 이유를 찾았습니다.
그 이유가 보이시나요?
아직 안 보이신다고요?????
이제는 보이지 않으시나요?
이 구닥다리... 그지 같은... 폰트.....
(개인의 취향마다 차이는 있겠지만 일단 제 취향은 아닙니다.)
그래서 오늘의 주제는....
⭐️블로그 제목 폰트 변경하기.⭐️
가 되겠사옵니다.
1. 폰트 찾기
우선 저 마음에 안 드는 폰트를 대체할 수 있는 예쁜 폰트를 찾아야 합니다.
폰트는 여러 사이트에서 찾을 수 있는데, 주로 아래의 두 가지 사이트를 많이 사용하시는 것 같아요.
▶︎ 구글 폰트
▶︎ 눈누
저는 <눈누>라는 사이트를 이용해서 폰트를 찾아볼려고 합니다!
*여기서 꿀팁!
저는 <눈누> 사이트에 들어가서 <모든 폰트> 탭을 클릭하고 <예시 문구 적기> 란에다가 저희 블로그 제목을 입력해 보면서 어울리는 폰트로 찾아봤어요!
이렇게 하니까 폰트를 직접 적용하지 않아도 느낌을 볼 수 있어서 좋더라고요!
제가 생각했을 때 블로그 제목에 어울리는 폰트는
1. 눈에 잘 들어오고 (크기나 굵기가 크면 좋을 것 같아요)
2. 호불호 없이 깔끔해야 함
인 것 같더라고요. 위 두 가지 조건을 충족하면서 저희 별밤의 특징이 잘 나타나는 폰트면 가장 좋을 것 같네요! (근데 아직 못 찾음ㅠ)
그래서 가장 만만하고 무난한 지마켓산스체를 선택했습니다!
결정하신 폰트를 클릭하신 후에 아래사진에서 보이는 것과 같이 <웹 폰트 사용>이라는 칸에서 코드를 복사하시면 됩니다.
2. 스킨 편집
원하는 폰트를 찾으셨다면 티스토리의 <스킨 편집> 페이지로 들어가야 합니다.
(지난 포스팅에서 말한 것처럼 블로그 홈에서 단축키 Q를 누르시면 블로그 관리 홈페이지로 넘어갑니다!)
<HTML 편집>을 누르셔서 <CSS> 화면 페이지로 들어가 주세요.
1) <CSS> 화면에서 ctrl+f로 '@charset "utf-8";'를 찾기
그 아래에 <눈누> 사이트에서 복사한 웹폰트를 복붙 해주세요.
@charset "utf-8";
2) <CSS> 화면에서 ctrl+f로 'header h1'을 찾기
header h1이 포함되어 있는 것들 중에서 가장 첫 번째 친구를 찾으시면 됩니다.
header h1
위 박스에서 'font-family' 부분에 변경할 폰트명을 입력해 주시면 되는데요!
변경할 폰트명은 <눈누> 사이트에서 복사한 코드의 'font-family' 부분에서 확인할 수 있어요!
@font-face {
font-family: 'GmarketSansMedium';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
이게 눈누에서 복사한 폰트 코드인데, 제 폰트명은 'GmarketSansMedium'이 되겠습니다!
이걸 티스토리의 <CSS> - <header h1> - <font-family> 부분에서, 기존에 입력되어 있는 폰트명을 삭제하시고 입력해 주시면 돼요.
그리고 가장 중요한 적용버튼을 누르시면!!!
요로코롬 바뀐 폰트를 보실 수 있습니다!!!
더 극적인 변화를 강조하기 위해서 전후 사진을 보여드리자면
어떠신가요??
조금 더.. 세련되고.. 트렌디하고... 요즘 시대 같은.. 그런 블로그 같지 않나요?!?!
이제 폰트 변경 방법을 알아버렸으니 앞으로 심심할 때마다 한 번씩 바꿔보도록 하겠습니다!!
더 좋은 폰트들이 있다면 댓글로 살포시 추천해 주시면 감사하겠습니다. 🥹
다음번에도 티스토리를 조금 더 팬시하게 바꿀 수 있는 정보들로 찾아오겠습니다!
많은 관심 부탁드려요~!!
아차차.. 우리 <별 헤는 밤> 앱에는 더욱더 크고 거대한 관심 부탁드립니다!!
'별밤 일지 > 기획' 카테고리의 다른 글
[티스토리 블로그 만들기] 게시글 줄 간격 조절하는 방법 (0) | 2024.07.14 |
---|---|
[티스토리 블로그 만들기] 북클럽 스킨 게시글의 제목 배경 편집 방법 (2) | 2024.03.19 |
[개발자와 화해하기] 데이터를 정리하는 법 (4) : 복잡한 가로/세로 데이터 변환 (0) | 2024.02.13 |
[티스토리 블로그 만들기] 북클럽 스킨 디테일 설정하기 (2) | 2024.02.04 |
[개발자와 화해하기] 데이터를 정리하는 법 (3) : 간단한 가로/세로 데이터 변환 (1) | 2024.01.09 |