구글 블로그 구글 폰트 추가하기 (블로거 글꼴)

11/21/2022 06:00:00 오전

구글 폰트

구글 폰트는 블로그 HTML 및 CSS에 link 또는 import 를 통하여 웹사이트를 더 예쁘게 꾸밀 수 있도록 지원합니다. 정말 예쁜 글꼴을 보았는데 그 글씨체를 다른 사람들에게도 보여주고 싶을 때 적용해 보세요. 물론 모든 폰트가 구글에 있는 것은 아닙니다.😥 현재 1400여 개의 폰트를 지원하고 있습니다.

폰트 찾기

구글 폰트 홈페이지 위에 폰트 검색 조건도 있으니 활용하시면 폰트를 찾는 데 더욱 도움이 될 것입니다.

구글 폰트를 적용하기 위해서는 우선 홈페이지로 이동을 해야겠지요? fonts.google.com 으로 이동해 주세요. 구글 폰트를 검색하셔도 됩니다. 구글 폰트에 접속하셨으면 마음에 드는 폰트를 선택해 주세요.

폰트 선택 시 세부조건으로 Thin, Light, Regular, Medium, Bold, Black 등 다양한 글꼴이 제공되오니 원하는 양식을 선택해 주세요. 폰트 적용방법은 링크 방식과 임포트 방식이 있는데 순서대로 알려드리겠습니다. 두 방법 중에 원하는 한 가지를 적용하시면 됩니다. 두 가지 다 하셔도 되기는 하는데 어차피 같은 기능이라 네트워크 속도만 저하되는 악영향만 있으니 그렇게 하지는 마세요.

link 추가하기

<head>를 찾아보면 다른 link 가 있는 경우가 있습니다. 그 부분에 붙여 넣으면 됩니다. 만약 링크가 없다면 meta 태그 아래에 적당한 곳에 넣어주세요.

import 추가하기

구글 폰트를 import 방식으로 추가하는 방법에 대해 안내해 드립니다.

@import 를 통해 폰트를 추가하는 방법입니다. link, import 둘 중에 원하는 방법을 선택하면 되기에 링크 방식으로 하려면 이 내용은 건너뛰세요.

구글 블로그를 사용하는 경우에는 head 태그 내에 <b:skin>이라고 하는 스킨 태그가 있을 것입니다. 해당 부분을 검색한 다음에 CDATA 쪽에 붙여 넣으면 됩니다.

티스토리 블로그를 하는 경우에는 HTML 편집의 CSS를 등록하는 부분에 <style> 과 </style>은 제외하고 @import만 붙여 넣으면 됩니다. CSS에 등록된 전체 문장이 style에 포함되는 영역이기 때문에 style 태그가 굳이 필요 없기 때문입니다.

폰트 적용하기

글꼴은 영어로 font-family 라고 합니다. 이제 링크나 임포트를 마쳤으니, 폰트 패밀리를 적용하는 방법을 알아야겠지요?

링크/임포트 부분을 복사하는 곳에서 하단에 보면 [CSS rules to specify families] 가 있습니다. 해당 코드를 원하는 CSS에 추가하면 됩니다.

예를 들면 p(paragraph : 단락형식) 태그의 폰트를 변경하고자 한다면 다음과 같이 할 수 있습니다.

p {
font-family: 'Noto Sans KR', sans-serif;
}

참고로 sans-serif; 에서 serif 라는 단어는 글자의 시작 또는 끝 부분에서 돌출된 부분을 의미합니다. sans 는 프랑스어로 없음을 뜻하며, sans-serif 는 세리프가 없는, 즉 돌출선이 없는 글꼴을 지칭합니다.

폰트 패밀리 적용 부분 마지막에 !important; 을 추가하여 후속하는 CSS에서 미리 설정한 폰트를 덮어쓰는 현상을 방지할 수도 있습니다.