구글 웹폰트 적용하기 (HTML/CSS)

웹 폰트를 사용하면 웹 페이지에 접속하는 사람들에게 의도한대로 텍스트를 표시할 수 있게 합니다.

접속한 사용자들이 폰트가 없어도 웹 폰트가 적용되어있으면 폰트가 적용 된 텍스트를 볼 수 있게 합니다.

웹 사이트에 폰트를 적용할때 구글 웹 폰트에서 제공하는 무료 웹 폰트를 사용하면 별도의 다운로드 작업 없이 임포트 하여 사용할 수 있습니다.

구글 웹 폰트를 사용하려면 먼저 구글 폰트 페이지에서 원하는 폰트를 선택해야합니다.

구글 웹 폰트 HTML/CSS 적용하기

[먼저 구글 폰트 페이지로 이동합니다]

→ https://fonts.google.com/

[상단의 메뉴바 중에서 표시한 부분을 누르면 Korean 버튼으로 한글 폰트만 보이게 정리 할 수 있습니다]

- 표시 되는 폰트 중에서 사용하고 싶은 폰트를 선택해서 들어가주세요 

[선택 한 폰트를 확인하고 오른쪽에 표시한 "Select this style" 버튼을 눌러주세요]

- 폰트의 상세 내용을 확인하고 우측 버튼을 누르면 오른쪽에 추가적인 창이 뜨게 됩니다.

- 어떤 폰트들은 하나의 폰트 안에 여러가지의 스타일이 있을 수 있습니다. 그 중에서 사용하고 싶은 스타일을 고르면 됩니다. 

[오른쪽에 추가적인 창이 뜨면 아래쪽에 @improt 체크박스에 체크하세요]

- 체크 이후 아래에 나오는 코드를 그대로 복사하시면 됩니다. 

복사한 코드를 <Style> 아래에 넣어주세요 

그리고 적용하고 싶은 곳에서 이렇게 적용 ( font-family: 'Do Hyeon', sans-serif; ) 해주시면 됩니다. 

이렇게 구글 웹 폰트를 활용하면 무료로 다양한 웹 폰트를 웹페이지에 적용 할 수 있습니다. 

생각보다 다양한 폰트가 있어서 원하는 폰트를 다양하게 사용 할 수 있고 한국어 뿐 만 아니라 영어, 일본어, 중국어 등등 외국어 폰트도 마음껏 사용할 수 있어서 매우 유용하게 사용 할 수 있었습니다.