웹폰트 적용하기의 모든것 - 1) 구글 웹폰트 적용하기

※ 기존 N사 블로그에 2019년 8월 18일자로 작성하였던 글을 금일 2019년 8월 29일자로 티스토리 블로그로 이전합니다.

브로마입니다.

​

웹폰트란 사용자가 가지고 있지 않은 폰트 중, 서버상에 존재하는 폰트의 데이터를 사용할 수 있는 것을 일컫습니다. 반대로 가지고 있는 폰트 파일을 서버에 업로드함으로서 웹폰트와 동일한 맥락으로 사용할 수도 있습니다.

​

웹폰트의 장점은 뭐 당연히 파일을 가지고 있지 않고 서버상의 url 주소만 가지고 있다면 어디서나 폰트를 적용할 수 있다는 장점이 있습니다.

웹폰트를 사용함에 있어 퍼블리셔들에게 뗄레야 뗄 수 없는 존재, 바로 "구글 웹폰트"입니다.

​

웹폰트 적용하기의 모든것 1편에서는 구글 웹폰트를 사용해 자신의 웹사이트에 웹폰트를 적용하는 방법에 대해 알아보겠습니다.

​

https://fonts.google.com/

Google Fonts

구글 폰트의 주소입니다.

우리는 오늘 한글 폰트를 적용해볼 예정이니

우선 Language탭에서 Korean만 선택해보겠습니다.

그 중에서 저는 제일 괜찮아 보이는 폰트, 나눔 고딕 코딩 폰트를 선택해보았습니다.

폰트 우측 상단에 있는 + 버튼을 누르면 장바구니에 폰트를 담는것처럼 Family Selected 탭에 담깁니다.

그 다음 customize 탭에 들어와서 기존에 regular에 해당하는 "400"만 선택되어 있는 것에 bold까지 선택해주었습니다. 필요에 따라 텍스트 굵기를 조절해주어야하는 상황이 있으니까요. Language에서는 Korean까지 선택해주었습니다.

그리고 다시 EMBED 탭으로 돌아와 위의 빨간 박스 두 곳의 코드를 복사해줍니다.

저는 차이를 두고 보기 위해 기본 글씨체인 맑은 고딕과 nanum이라는 클래스에는 나눔고딕코딩을 적용시켜 주었습니다. 위처럼 적용을 해주고 저장한 다음 실행해보았습니다.

개발자 도구로 확인해본 결과 정상적으로 출력되네요.

감사합니다.