구글 웹 폰트 사용하기

구글에서는 고맙게도 웹 개발자를 위해 웹 폰트를 지원하고 있다. 웹 폰트를 사용하면 폰트를 따로 다운로드 할 필요 없이 직접 링크해 사용할 수 있다. 웹 사이트에서 많이 사용하는 한글 글꼴인 ‘나눔 고딕’을 예로 들어보자.

위의 search탭에서 Nanum Gothic글꼴을 찾아 클릭하면 여러 스타일이 나타난다. 그 중 사용하고 싶은 스타일 오른쪽의 Select this style을 클릭한다.

화면 오른쪽에 해당 웹 폰트에 대한 정보가 나타난다. @import탭에서 소스를 복사한다.

복사했다면 내 소스의 <style>태그에 붙여 넣는다.

<style>
    @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
    .ng-font{
        font-family: 'Nanum Gothic';
    }
    p {
        font-size: 30px;
    }
    </style>

    <p>브라우저 기본 글꼴 사용</p>
    <p class="ng-font">나눔고딕 웹 폰트 사용</p>