구글 웹 폰트 다운로드와 사용법을 찾고 계셨나요? 증명되지 않는 곳에서 무심코 폰트를 구해서 사용하게 되면 폰트 저작권 위반에 걸려 개인적인 블로그라도 벌금을 낼 수 있는 상황이 발생합니다. 하지만 블로그 혹은 웹 사이트에서 자신이 사용하고 싶은 폰트를 사용하고 싶을 경우 요즘에는 무료로 제공되는 구글 한글 폰트 등 다양한 웹 폰트를 사용해 웹 사이트에 적용할 수 있습니다.
또한 웹 폰트가 아닌 기본적인 폰트 파일을 가지고 블로그, 웹 사이트에 적용하게 된다면 파일 크기 때문에 웹 사이트 로딩 시간이 길어지기도 합니다. 그렇기 때문에 웹 폰트를 사용하는 것 인데요
이번 포스팅에서는 무료로 제공되는 구글 웹 폰트 다운로드 방법부터 사용법(적용법)을 알아보도록 하겠습니다.
[toc]
구글 웹 폰트 다운로드 및 코드 가져오기
구글 웹 폰트 에 접속해보면 나눔 고딕, 나눔 명조 등 굉장히 많은 종류의 폰트, 한글 폰트를 무료로 제공하고 있습니다. 자신이 원하는 폰트를 찾고 다운로드 혹은 코드를 가져와 적용하는 하는 방법을 알아보겠습니다.
구글 웹 폰트 사이트에서 한글 웹 폰트를 찾아야 합니다. 사진에 보이는 것 처럼 언어(Language) > 한국어 (Korean)으로 변경을 해줍니다.
구글 한글 웹 폰트는 999개 중 26개가 있는 것을 확인할 수 있습니다. 원하는 폰트를 찾으셨다면 폰트를 선택하여 다음으로 넘어갑니다.
이제 선택했던 폰트의 스타일 (Regular, Bold, Extra Bold) 선택 > 우측 상단의 사각형 아이콘 > Embed를 클릭하여 웹 폰트를 사용할 수 있는 코드를 복사해 줍니다. (link 아래에 있는 코드 복사 / 그 아래 CSS 코드는 밑에서 사용)
구글 웹 폰트 사용법 (적용법)
(예시 사진에서는 구글에서 제공하는 한글 폰트를 티스토리에 적용시키고 있습니다)
변경하고자 하는 웹 사이트, 블로그, 혹은 티스토리의 CSS 편집 공간으로 이동해 줍니다. 그리고 사진에 보이는 것 처럼 여러 CSS코드 시작 부분에 “구글 웹 폰트 다운로드 방법 및 코드 가져오기”에서 복사한 구글 웹 폰트 코드를 붙여놓습니다.
구글 웹 폰트 코드 복사를 한 시점으로 돌아가 Embed > link 밑에 있던 CSS 코드 속 폰트 이름 복사를 해 줍니다. (예 : font-family: ‘Noto Sans KR’, sans-serif; 에서 ‘Noto Sans KR’ 만 복사 )
이제 복사한 웹 폰트를 웹 사이트에서 사용 할 수 있도록 입력해 줘야 합니다.
윈도우 control + F / 맥 command + F 을 눌러 글자 탐색에 font 를 검색 > font family 코드 옆 위에서 복사한 폰트 이름을 붙여넣기 해줍니다.
이제 사이트를 새로고침 하면, 내가 선택한 폰트로 바뀐 것을 확인 할 수 있습니다.
이렇게 구글에서 무료로 적용하는 한글 폰트를 가지고 와서 웹 사이트에 적용까지 하는 구글 웹 폰트 사용법을 알아보았습니다. 이 글에서 예시는 티스토리로 했지만 워드프레스나 다른 웹 사이트에서 폰트를 적용하는 방법은 거의 비슷하니 참고하시고 원하는 폰트로 바꿔 사용하시길 바랍니다.
이 글에서 문제가 되거나 잘못된 점이 있다면 아래 댓글에서 알려주세요 긴 글 읽어주셔서 감사합니다.
