구글 폰트에서 네이버 나눔 고딕체를 적용해서 사용하는 방법
구글에서 폰트를 제공합니다. 제공뿐만 아니라 코드만 넣으면 사용할 수 있는 서버 역할도 하고 있습니다. 이것을 잠시 설명하면 개인이 폰트를 바꾸기 위해서는 안정적으로 지원할 수 있는 호스팅이 있어야 합니다. 그리고 알맞은 코드를 사용해서 저장된 폰트를 불러서 사용할 수 있습니다. 구글 폰트에서 제공하는 것은 물론 폰트도 제공하지만, 호스팅 역할도 하기에 사용자는 코드만 넣으면 구글 폰트에 저장된 폰트를 사용할 수 있습니다.
구글 폰트에서 제공하는 네이버 나눔 고딕체입니다.
나눔 고딕체가 있는 주소로 바로 연결했습니다. 오른쪽에 Got font를 클릭합니다.
맨 위에 있는 Got embed code를 클릭합니다.
맨 위에 있는 html <head> 속에 들어갈 코드와 CSS 폰트 설정에 들어갈 코드가 있습니다. 이 두 개를 Copy code를 눌러 메모장 또는 에디터툴에 붙여 넣습니다.
사실은 구글 폰트에서 코드를 제공하고 있지만, 이 코드는 전혀 사용하지 않아도 됩니다. 구글 폰트를 보여드린 것은 다른 폰트를 사용할 때 이렇게 하면 된다는 것을 보여드리는 의미라고, 생각하면 좋겠습니다. 그 이유는 여기서 가져온 코드가 사실은 제대로 작동하지 않습니다. 그래서 코드를 고쳐야 하는데요, HTML 편집으로 들어가겠습니다.
구글 블로그 관리자 화면, 테마, 오른쪽에 역삼각형을 누르고 HTML 편집으로 들어갑니다.
표시된 부분이 <head> 쪽입니다. 앞서 구글 폰트에서 받은 코드 중에서 맨 위에 있는 표시가 되어 있는 코드는 반드시 <head></head> 사이에 들어가야 합니다. 그 소스를 넣었는데, 폰트 설정이 바뀌지 않으면 아래와 같이 수정합니다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
이 코드는 성공해서 잘 사용하고 있는 코드로서 전혀 걱정할 것이 없습니다. 위의 코드를 <head> 아래에 보면 <-- Google Fonts --> 아래에 위 소스를 넣습니다. -- Google Fonts -->이 표시는 구글 폰트에서 가져온 폰트를 사용한다는 뜻인데요, 많은 사람이 구글 폰트를 사용하고 있더군요. 이 자리 아래 위 등 편한 곳에 넣으면 됩니다.
이번에는 CSS 코드입니다.
font-family를 검색해서 위 위치를 찾습니다. 구글 블로그의 폰트 CSS는 저 위치에 있습니다. 항상 CSS 코드가 같은 자리에 있지는 않지만, 구글 블로그라면 비슷한 곳을 찾으면 됩니다. 이번에도 구글 폰트에서 가져온 CSS 코드를 넣습니다. 마찬가지로 폰트가 변경이 안 되면 아래 코드를 사용합니다. 다른 것은 건드리지 않고 'font-family:' 이 부분만 수정하면 됩니다.
font-family: "Nanum Gothic Coding, monospace"
수정된 코드는 잘되고 있는 코드입니다. 확인해 보시죠. 금방 폰트가 바뀌네요. 생각보다 간단하죠.