구글 폰트
구글 폰트는 블로그 HTML 및 CSS에 link 또는 import 를 통하여 웹사이트를 더 예쁘게 꾸밀 수 있도록 지원합니다. 정말 예쁜 글꼴을 보았는데 그 글씨체를 다른 사람들에게도 보여주고 싶을 때 적용해 보세요. 물론 모든 폰트가 구글에 있는 것은 아닙니다.😥 현재 1400여 개의 폰트를 지원하고 있습니다.
폰트 찾기
구글 폰트를 적용하기 위해서는 우선 홈페이지로 이동을 해야겠지요? fonts.google.com 으로 이동해 주세요. 구글 폰트를 검색하셔도 됩니다. 구글 폰트에 접속하셨으면 마음에 드는 폰트를 선택해 주세요.
폰트 선택 시 세부조건으로 Thin, Light, Regular, Medium, Bold, Black 등 다양한 글꼴이 제공되오니 원하는 양식을 선택해 주세요. 폰트 적용방법은 링크 방식과 임포트 방식이 있는데 순서대로 알려드리겠습니다. 두 방법 중에 원하는 한 가지를 적용하시면 됩니다. 두 가지 다 하셔도 되기는 하는데 어차피 같은 기능이라 네트워크 속도만 저하되는 악영향만 있으니 그렇게 하지는 마세요.
link 추가하기
<link> 방식 추가는 보통 <head> 태그에 CSS를 연계하는 방법입니다. 블로그 > 테마 > HTML 편집으로 이동하여 복사한 link 를 붙여넣기 해주세요.
<head>를 찾아보면 다른 link 가 있는 경우가 있습니다. 그 부분에 붙여 넣으면 됩니다. 만약 링크가 없다면 meta 태그 아래에 적당한 곳에 넣어주세요.
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 : 단락형식) 태그의 폰트를 변경하고자 한다면 다음과 같이 할 수 있습니다.
font-family: 'Noto Sans KR', sans-serif;
}
참고로 sans-serif; 에서 serif 라는 단어는 글자의 시작 또는 끝 부분에서 돌출된 부분을 의미합니다. sans 는 프랑스어로 없음을 뜻하며, sans-serif 는 세리프가 없는, 즉 돌출선이 없는 글꼴을 지칭합니다.
폰트 패밀리 적용 부분 마지막에 !important; 을 추가하여 후속하는 CSS에서 미리 설정한 폰트를 덮어쓰는 현상을 방지할 수도 있습니다.