본문 바로가기

Frontend

14. 웹 개발에 필요한 구글 무료 웹 폰트 사용하기

웹 개발할 때 가장 필수적인 것은 바로 글자(font)를 빼먹을 수 없습니다.

 

이 또한 구글에서 무료로 제공하고 있습니다.

 

 

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

해당 사이트를 들어가서 원하는 폰트를 검색하여 사용할 수 있습니다.

 

예를 들어 나눔 폰트를 사용하려고 한다면,

 

이렇게 폰트를 검색해준 후

 

자신이 원하는 폰트를 선택해 줍니다.

 

저는 나눔 고딕 폰트를 선택하였습니다.

 

자신이 원하는 폰트를 선택한 후 우측 창에서 CSS를 연결해 주어야 합니다.

 

참고로 regular 400, Bold 700, Extra-bold 800 이라는 숫자는 글자의 굵기를 의미합니다.

 

따로 CSS에서 글자 굵기를 관리하려면 font-weight 속성에서 100~ 900사이의 값을 넣어 별도로 지정해 줄 수 있습니다.

 

우측에 보이는 <link>를 자신의 html 파일 <head>부분에 복사 붙여넣기 해주세요.

 

그리고 CSS에서 font-family라는 속성을 통해 해당 폰트를 지정해주면 완료됩니다.