구글 블로거에 올리는 글들의 폰트를 지정한 폰트로 나타내게 수정하는 방법에 대해서 올립니다.
글을 작성할 때 마다 폰트를 지정하는데 시간이 많이 걸리므로,
대안으로 작성한 모든 글에 대해서 특정한 폰트로 나타내주게 하는 방법입니다.
참고로 이 포스팅은 2021-02-14에 글쓴이의 구글 블로그에 올렸던 내용을 가져왔습니다.
지금은 티스토리에서 자리를 만들어가고 있지만 당시에는 구글 블로그에서 기록을 이어나갈 생각으로 이것 저것 포스팅을 했었네요. 구글 블로그를 닫으면서 삭제하기에는 아까운 글들은 하나 둘 씩 티스토리로 이전하고 있습니다. 내용이 없는 글들은 삭제처리를 하고 있지만 작성당시 공수가 들어갔던 글들은 그냥 지워버리기에는 아깝더라구요.
1. 구글 블로거 기본글꼴 변경
1) 구글 폰트에 접속합니다 : https://fonts.google.com/
2) 마음에 드는 글꼴 찾아 링크 복사합니다 (링크 위치는 스크린샷 참조)
3) 블로거 설정 들어가기 (테마 -> 맞춤설정 -> HTML 편집)
[주의] HTML편집 전 "테마백업" 메뉴를 눌러서 XML파일로 백업 받아놓아야 실수 했을 때 되돌리기 가능합니다
4) <HEAD> 와 </HEAD> 사이에 복사해온 링크 붙여넣습니다
[팁] 글꼴을 추가하는 위치에 HTML 주석을 사용해서 표시를 해두면 나중에 어디에 추가했었는지 찾기 쉬워요. HTML에서는 <!-- 주석 --> 으로 주석을 사용 할 수 있습니다.
[주의] 구글 폰트에서 링크를 복사해오면 마지막에 "/"이 빠져있는데, HTML편집에서는 "/"를 마지막에 넣어주어야 합니다. 또한 display 뒤에는 세미콜론으로 끝나야 합니다.
복사해온 링크: <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
넣는 링크: <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet"/>
5) CSS 설정하기
테마 -> 맞춤설정 -> 고급 -> CSS추가로 들어가서 아래 문구를 추가해주면 완성됩니다.
{font-family: 'Nanum Gothic', serif !important;}
CSS로 추가된 코드는 마찬가지로 HTML 편집 메뉴로 들어가면 찾을 수 있는데, 그곳에서 먼저 넣어둔 코드를 주석처리하고 새로운 코드를 집어넣으니 에러가 납니다. (폰트가 제멋대로 바뀌어버림) 그래서 원래 있던 코드를 삭제하고 새로 넣을 코드를 넣는 것으로 마무리를 했습니다.
2657줄 수정사항 (210214)
변경 전: font-family: 'Noto Serif KR', serif !important;
변경 후: font-family: 'Nanum Gothic', serif !important;
2. 미리보기 글 줄간격 변경하기
HTML편집 -> ".pst-body" 검색
글쓴이의 경우 2002번 줄에서 1건 검색되었습니다.
[변경 전]
.post-body{
color:$(posts.text.color);
font:$(posts.text.font);
line-height:1.6em;
margin:1.5em 0 2em 0;
display:block
}
[변경 후]
.post-body{
width:100%;
color:#000000
font:$(posts.text.font);
font-size:15px;
line-height:2.0em;
margin:1.8em 0 2em 0;
display:block
}
'컴퓨터, IT > 블로그, WEB' 카테고리의 다른 글
| 구글 플레이콘솔 개발자 확인 절차! (feat. "계정 확인을 완료하지 않으면 개발자 프로필과 모든 앱이 Google Play에서 삭제됩니다") (1) | 2025.01.22 |
|---|---|
| Google 애드센스 PIN 번호 인증하기 (주소를 확인하지 않아 지급이 보류 중입니다) (0) | 2021.07.18 |
| 티스토리 애드센스 연동, 광고 게시 설정하기 (0) | 2021.07.01 |
| 애드센스 심사 무한대기 해결 ("사이트를 검토중입니다") (0) | 2021.06.30 |
| [티스토리, 구글블로거] 파비콘 만들기 (그림판, ICO, Favicon) (0) | 2021.06.25 |
