구글 블로그 폰트 설정하기 - part 1
구글 블로그 폰트 설정하기
구글 블로그는 기본적인 폰트만 제공하고 글 에디터도 정말 기본적인 기능만 제공합니다. 그렇기 때문에 본인의 입맛대로 폰트 종류나 사이즈, 줄 간격 등을 세팅하기 위해서는 html 을 수정해야 합니다. 그럼 폰트의 종류, 사이즈, 줄 간격을 변경하는 방법을 간략하게 소개해 보겠습니다.
무료 폰트 확인
구글 검색창에 '구글폰트'라고 입력 후 검색하면 다음과 같은 사이트를 확인할 수 있습니다.
fonts.google.com
다음의 사이트로 이동합니다.
돋보기 모양의 검색 창에 nanum을 입력합니다. (본인이 원하는 폰트를 입려하시면 됩니다.) 검색 결과로 나눔고딕 등의 폰트가 검색이 되는 것을 확인할 수 있습니다. 그 중 1개의 폰트를 클릭합니다.
해당 폰트의 상세 내용을 확인하고 오른쪽 사이드 바를 보면 'Select the style'이라는 매뉴가 있는데, 해당 매뉴를 클릭합니다.
Review 탭에서 'Add more style'을 선택하면 다른 폰트를 검색하여 사용할 폰트로 추가할 수 있습니다.
Embed 탭을 보면 <link> 항목에 해당 폰트에 대한 web 주소가 나오는데요, 이 주소를 복사합니다.
폰트 적용
구글 블로그 설정에서 '테마' 매뉴를 클릭 후 상단의 ... 을 클릭하면 나오는 매뉴 중에 'HTML 편집' 매뉴를 클릭하여 선택합니다.
4번째 줄에 <head>로 시작하는 태그들이 있는데요, 바로 아래쪽에 무료 폰트를 검색하고 복사한 link를 붙여 넣습니다.
주의사항 1 : &display=swap 삭제
주의사항 2 : 맨뒤에 / 기입
html 문법 오류 등이 발생하면 적용이 되지 않습니다. 저장되지 않을 경우 문법 등을 다시 한 번 체크해 보시면 됩니다.
폰트 변경
위의 단계에서는 폰트가 블로그에 로드 될 수 있게 설정했고, 이제 로드된 폰트를 실제 블로그에 적용해야 합니다. '테마' 매뉴에서 '맞춤설정'을 클릭합니다.
'고급' 항목에서 선택 가능한 매뉴 중에서 'CSS' 추가를 선택합니다. 바로 아래 '맞춤 CSS 추가'라고 되어 있는 부분에 아래의 코드를 입력합니다.
body, h1, h2, h3, h4, a, div, input, p, span, td, label, select, textarea, iframe { font-family: 'Nanum Gothic Coding'; } .post-body { font-family: 'Nanum Gothic Coding'; font-size: 17px; line-height: 2.0; } .Header .description, .Header h1 { font-family: 'Nanum Gothic Coding'; } .main-inner .widget h2.date-header span { font-family: 'Nanum Gothic Coding'; } h3.post-title { font-family: 'Nanum Gothic Coding'; } h3.post-title a { font-family: 'Nanum Gothic Coding'; } .sidebar .widget { font-family: 'Nanum Gothic Coding'; |
실제 본인의 블로그에 입력할 때는 다음의 항목을 조절하여 입력하면 됩니다.
폰트 크기 : font-size
폰트 줄간격 : line-height
안녕하세요! 반갑습니다. 검색하다가 우연히 들어오게 됬어요. 좋은 정보 감사해요.
답글삭제