구글 블로그 나눔 고딕체적용은 간단하게 설정할 수 있습니다
폰트는 구글 폰트에서 제공하고 있습니다. 이 이야기는 구글 폰트에는 듣지도 못한 나라의 폰트까지 있습니다. 구글은 전 세계 상대로 소비자를 끌어들이고 있기에 우리 한국으로서는 이런 나라도 있었나 할 정도의 폰트도 있지만, 어쩌면 그들의 나라에서도 한국의 폰트가 있다는 것이 신기할 수 있습니다. 이런 때는 내비를 보면서 느끼는 것에요, 내 지역에 있는 골목 골목이 지도에 올라와 있습니다. 내 지역을 돌아다니면서 내비에 올라오는 세세한 길 안내를 당연하게 생각하다가 강원도 외지를 방문하면 이런 곳까지 지도로 올라와있네 하는 생각이 들기도 했는데요, 아마 구글 폰트를 보면 내비에서 봤던 신기함이 그대로 보입니다.
사실 구글 블로그 나눔 고딕체를 적용하기 위해서는 구글 폰트를 방문할 필요도 없습니다. 하지만 어떻게 구성되어 있는지 잠깐 살펴보면, 구글 폰트 나눔 고딕체
구글 폰트에 있는 네이버 나눔 폰트 편입니다. 오른쪽에 Get font를 누르면 코드를 얻을 수 있습니다.
여기서 Get embed code를 클릭합니다.
여기서 보이는 화면 소스를 복사해서 가져옵니다.
이 곳은 구글 블로그 <head> 섹션에 넣습니다.
<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&display=swap" rel="stylesheet">
CSS코드는 CSS섹션에 넣어야겠죠.
.nanum-gothic-regular {
font-family: "Nanum Gothic", sans-serif;
font-weight: 400;
font-style: normal;
}
그런데 구글 폰트에서 작성해 준 그대로 구글 블로그에 넣으면 오류가 납니다. 하나만 보여 드릴게요.
org.xml.sax.SAXParseException; lineNumber: 33; columnNumber: 70; Attribute name "crossorigin" associated with an element type "link" must be followed by the ' = ' character.
해석하면 org.xml.sax.SAXParseException; 33번째 줄; 70번째 열; "crossorigin" 속성 이름은 "link" 요소와 관련이 있으며 반드시 '=' 문자 뒤에 값이 따라와야 합니다. 즉, <link href='https://fonts.gstatic.com' rel='preconnect' crossorigin='anonymous'/> 이렇게 수정해야 합니다. 그리고 각 코드 뒤에는 />를 넣어서 마감해야 합니다. 이후에도 몇 가지 오류가 나오는데요, 마지막으로 최종 수정해서 정상적으로 사용하는 코드를 바로 보여드리겠습니다.
<head>에 들어가는 수정된 코드입니다.
<!-- Nanum+Gothic+Coding -->
<link href='https://fonts.googleapis.com' rel='preconnect'/>
<link crossorigin='crossorigin' href='https://fonts.gstatic.com' rel='preconnect'/>
<link href='https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap' rel='stylesheet'/>
이 코드는 옳다 그르다를 따질 수도 있지만, 정상적인 나눔고딕체가 나오고 있습니다.
입력하는 자리는 구글 블로그 스킨에는 반드시 구글 폰트가 들어가 있는 자리가 있습니다. 물론 <head><head/> 사이라면 어디라도 상관없습니다만, 이왕이면 같은 폰트 소스가 있는 자리에 같이 입력하면 나중에 찾기도 좋습니다.
그리고 이번에는 위 코드를 다시 수정한 코드인데요, 아마 이것이 올바른 코드일 겁니다.
<link href='https://fonts.googleapis.com' rel='preconnect'/>
<link href='https://fonts.gstatic.com' rel='preconnect' crossorigin='anonymous'/>
<link href='https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap' rel='stylesheet'/>
일단 이 두 가지를 업데이트했더니 구글 블로그에서 오류가 나오지 않았고, 앞서 정상적으로 나눔 고딕체가 나오는 블로그에도 전혀 이상 없이 나눔 고딕이 보입니다. 그렇다면 위도 두 개의 코드는 전혀 문제가 없다는 거죠.
그리고 폰트 변경에서는 한 가지 더 수정해 줘야 합니다. 위의 코드는 구글 폰트에 저장된 나눔 고딕체를 이 블로그에서 사용하겠다는, 이 블로그로 폰트를 가져오는 코드였는데요, 그렇다면 실제로 이 블로그에서 나눔 고딕을 적용하기 위한 폰트를 지정해 줘야 합니다. 폰트를 사용하겠다고 코드를 가져왔지만 아직은 이전에 적용된 폰트가 사용되고 있습니다. 그래서 그 폰트 이름을 바꾸면서 이제는 이 블로그에서 나눔 고딕으로 바꾸겠다고 선언하는 것인데요.
font-family: 이름으로 검색합니다. 그리고 이 위치를 확인해서 이 문장만 복사 덮어씌우면 됩니다. font-family: "Nanum Gothic Coding, monospace" 다른 코드는 그대로 둡니다.
이번에 구글 블로그 나눔 고딕체를 다시 돌아본 계기가 있습니다. 새로운 블로그를 만들었는데, 기존 블로그에서 정상적으로 사용하던 코드를 그대로 붙여 넣었는데도 적용이 안 됩니다.
분명히 같은 코드인데도 폰트크기도 다릅니다. 왼쪽이 나눔 고딕체이며, 오른쪽은 블로그에서 설정된 폰트입니다. 코드도 똑같은데요, 한쪽은 나눔고딕체가 적용되고 한쪽은 안되네요.
구글 블로그는 레이아웃만 다르지 그 속에서 사용하는 글래스 등은 똑같이 사용합니다. 일부 스킨에서 약간 모양을 내기도 하지만 큰 틀에서는 달라지지 않죠. 그런데도 지금처럼 폰트 적용이 다르다는 것은 신생 블로그라서 그럴까요. 조금 더 지켜보겠습니다. 아뭏튼 구글 블로그 나눔 고딕체 적용은 위의 구글 폰트까지 갈 필요 없이 위의 소스만 붙여 넣기 하면 됩니다.