본문 바로가기

Language

Google Fonts

728x90

Google Fonts

 

웹을 개발할 때, 기본 폰트가 아닌 다른 폰트를 사용하는 경우가 많습니다. (한글은 특히 나눔폰트)

TTF 등의 폰트파일을 첨부해도 되는데, Google에서 제공하는 Fonts를 사용해보도록 하겠습니다.

https://fonts.google.com/

해당 사이트에 가보시면 다음과 같이 Fonts의 미리보기를 보실 수 있습니다.

문장, 문단, 숫자 등으로 미리보기를 할 수 있으며, 타입(Regular, Bold, Extra Bold 등)과 크기 또한 바꿀 수 있습니다.

폰트사용하기

각 폰트의 왼쪽 상단 

를 클릭하시면 하단에 장바구니와 같이 폰트가 추가됩니다.

 

검은 영역을 클릭하시면 아래와 같이 커지면서 추가방식을 선택할 수 있습니다.

 

HTML 파일에 link 방식으로 추가하실 경우에는 STANDARD를 선택하고 해당 구문을 복사하시면 됩니다.

 

CSS 파일에 @IMPORT 방식으로 추가하실 경우에는 @IMPORT를 선택하고 해당 구문을 복사하시면 됩니다.

 

사용하실 때는 예시에 나온 것 처럼( font-family: 'Nanum Gothic', sans-serif; ) 사용하시면 됩니다.

 

만약 기본 폰트 이외에 다른 옵션을 사용하고자 하시는 경우에는 CUSTOMIZE 탭을 클릭하셔서 선택하시면 됩니다.

반응형