구글 폰트를 이용해서 간편하게 글씨체를 바꾸고 자신이 좋아하는 폰트로 바꾸는 방법입니다. 몇 가지 중요한 부분도 있으니 차근하게 살펴보세요.
목록
1. 전 세계 글씨체를 저장하는 구글 폰트
2. 어떤 폰트를 사용해야 하나
3. 구글 폰트에서 네이버 나눔 고딕체를 적용하는 방법
4. 구글 블로그 자신이 좋아하는 폰트 적용 방법
5. 변경된 폰트가 휴대폰에서는 나오지 않을 때
1. 전세계 글씨체를 저장하는 구글 폰트
구글 폰트는 미국이 힘자랑하듯 구글도 전 세계를 다루어야 한다는 사명감이 있습니다. 엄청난 나라의 폰트를 제공하고 있습니다. 이런 나라도 있나 싶을 정도로 많은 나라의 폰트를 제공하고 있죠. 마치 산골 외지를 달리는데 내비가 알아서 인도해 줄 때, 어떻게 이런 산골짜기 길은 어떻게 알 수 있을까 하는 신기함, 그런 느낌을 구글 폰트에서 받습니다.
2. 어떤 폰트를 사용해야 하나
폰트 선정에 잠깐 잔소리를 한다면 폰트는 자신이 좋아하는 것을 고르는 것이 아닙니다. 방문자가 편하게 글을 읽고 오래 머무를 수 있는 가독성이 뛰어나고 안정감을 주어야 합니다. 그것이 사이트, 블로그를 만드는 이유이기도 합니다. 많은 사람에게 보여주기 위한 장이니까요. 그렇지 않고 형형색색 또는 독특한 형태의 폰트를 사용하는 것은 방문자에게 내용을 보여주기보다는 글자를 읽기 위해 어떤 글자인가를 확인해야 하는 상황이라면 방문자는 들어왔다가도 바람처럼 나가버릴 겁니다. 색상 역시 방문자가 가장 편하게 안정된 색상으로 제공해야 합니다.
3. 구글 폰트에서 네이버 나눔 고딕체를 적용하는 방법
구글에서 폰트를 제공합니다. 전세계 미국이 장악하고 있는 나라는 구글에서 폰트를 저장하고 그 코드를 제공합니다. 사용자는 폰트를 별도로 저장할 필요 없이 해당 폰트 코드만 넣으면 사용할 수 있습니다. 개인 폰트를 사용하기 위해서는 어떤 조건이 필요한지 아래에서 보여드리겠습니다.
먼저 구글에서 제공하는 한글 폰트를 살펴보겠습니다.
https://fonts.google.com/?subset=korean&preview.script=Kore&script=Kore
지금은 한글 폰트 41종이 들어있습니다. 처음 구글 폰트에 방문했을 때는 훨씬 적었죠. 열 손가락으로도 셀 수 있지 않았을까요, 지금은 41종으로 늘어났습니다. 하지만 가장 많이 사용하는 폰트는 위의 두 가지입니다. Noto Sans KR과 사람이 눈에 익은 Nanum Gothic입니다. 나눔 고딕체를 연결하는 방법을 보여드리겠습니다. 나눔 고딕체를 클릭합니다.
화면 오른쪽에 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.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap" rel="stylesheet">
이 코드는 성공해서 잘 사용하고 있는 코드로서 전혀 걱정할 것이 없습니다. 위의 코드를 <head> 아래를 보면 <-- Google Fonts --> 이 표시가 있습니다. 구글 폰트에서 가져온 폰트를 사용한다는 뜻인데요, 구글 블로그뿐만 아니라 많은 스킨 제작자는 구글 폰트를 사용하고 있습니다. 나눔 고딕체 코드를 넣는 위치는 이 자리 아래위 등 편한 곳에 넣으면 됩니다. 역시 구글 폰트를 사용하는 거니까 같은 위치에 넣는 게 알기 쉽습니다.
font-family: "Nanum Gothic Coding, monospace"
이번에는 CSS 코드입니다. font-family를 검색해서 위치를 찾습니다. 구글 블로그의 폰트 CSS는 저 위치에 있습니다. 항상 CSS 코드가 같은 자리에 있지는 않지만, 구글 블로그라면 비슷한 곳을 찾으면 됩니다. 이번에도 구글 폰트에서 가져온 CSS 코드를 넣습니다. 마찬가지로 폰트가 변경 안 되면 아래 코드를 사용합니다. 다른 것은 건드리지 않고 'font-family:' 이 부분만 수정하면 됩니다.
수정된 코드는 잘되고 있는 코드입니다. 확인해 보시죠. 금방 폰트가 바뀌네요. 생각보다 간단하죠. 그리고 사실은 구글 폰트 사용하는 것은 구글 폰트에 방문할 필요가 없습니다. 폰트를 가져와서 저장하는 것도 아니고 여기에 있는 코드만 그대로 사용하면 됩니다. 구글 폰트를 사용하기 위해 사이트를 등록할 필요가 없으니까요.
4. 구글 블로그 자신이 좋아하는 폰트 적용 방법
구글 블로그 폰트를 바꿀 수 있는 방법이 또 있는데요, 이번에는 본인이 좋아하는 폰트를 계정에 직접 업로드하고 사용하는 방법을 알아봅니다. 구글 폰트는 구글에서 나눔 고딕체를 저장하고 해당 코드를 제공하지만 좋아하는 폰트를 사용하기 위해서는 해당 폰트를 서버에 올려야 합니다. 서버는 거창하게 들리지만, 네이버나 구글 드라이버, 티스토리에 첨부파일로 넣고 그 주소를 사용하면 됩니다.
블로그를 한다면 간단한 호스팅을 구하는 것을 권합니다. 다른 플랫폼을 이용해서 사용할 수 있다고 하더라도 자신의 정해진 서버가 있는 것이 깔끔합니다. 소유하고 있는 폰트를 호스팅 계정에 올립니다. 그리고 구글 블로그 HTML 편집으로 들어갑니다. 위에서 나눔 고딕체 넣는 곳입니다.
]]></b:skin>
<style>
이 부분을 찾아 그 아래 코드를 넣습니다.
]]></b:skin>
<style>
@font-face {
font-family: "LexiSaebomR";
font-style: normal;
font-weight: 400;
src: url("https://경로/LexiSaebomR/LexiSaebomR.woff") format("woff");
}
티스토리라면 images 폴더에 폰트 파일을 넣습니다. 그리고 코드는 경로에 맞게 수정해야 하겠죠.
@font-face {
font-family: LexiSaebomR;
src: url('경로/LexiSaebomR.eot');
src: url('경로/LexiSaebomR.eot?#iefix') format('embedded-opentype'),
url('경로/LexiSaebomR.woff') format('woff'),
url('경로/LexiSaebomR.ttf') format('truetype'),
url('경로/LexiSaebomR.svg') format('svg');
}
이건 개인적으로 좋아하는 렉시새봄R 폰트인데, 제공하는 코드 몽땅 적었습니다. 그런데 반드시 위의 코드를 다 넣을 필요 없습니다. 웹 폰트 하나만 넣으면 되는데요, LexiSaebomR.woff 웹 폰트를 넣습니다. 이번에는 빼먹으면 안 되는, 반드시 넣어야 하는 코드는 font-weight: 400; 폰트 크기를 꼭 넣어야 합니다. 구글 블로그에는 들어있습니다만, 개인 설정이나 티스토리에서 사용할 때는 필수로 넣어야 하는 코드입니다.
body {
font-family: "LexiSaebomR", 'Pretendard', -apple-system, sans-serif;
font-size: 16px;
color: #333;
background: #f8f8f8;
}
그리고 폰트 설정은 앞서 나눔 고딕체 코드를 넣었던 font-family: 자리를 찾아서 font-family: 이 한 줄만 바꾸면 됩니다.
어떤가요, 흔하게 보는 나눔 고딕, 맑은 고딕에서 이쁜 글씨체로 변경되었죠.
5. 변경된 폰트가 휴대폰에서는 나오지 않을 때
PC에서는 나만의 폰트가 잘 나옵니다. 위에 캡처한 그대로 이쁜 글씨체가 나오죠. 그런데 휴대폰에서는 나오지 않는 겁니다. 컴퓨터에 CSS를 넣었지만 안 되고 컴퓨터에 설치된 폰트로 지정되어 나올 수도 있다고 합니다. 그럴 수도 있을 겁니다. 이전 웹 폰트를 만들어 테스트하면서 이런 착각을 하기도 했죠. 정말 새로운 웹 폰트가 적용된 것인지, 아니면 내 컴퓨터에 설치된 폰트가 나오는 것인지 알 수 없었던 시절도 있었습니다. 이럴 때는 가장 간편하고 빠르게 확인하는 방법이 있는데요, 바로 시크릿 모드로 확인하는 겁니다.
별도의 캡처 화면 없이 설명으로 대신하겠습니다. 컴퓨터는 Ctrl + Shift + N을 누르면 시크릿 창으로 들어갈 수 있고, 휴대폰은 크롬의 경우 오른쪽 위의 점 3개 아이콘을 누르고 새 시크릿 탭을 선택합니다. 그리고 주소창에 해당 사이트를 띄워보면 됩니다. 여기서 새로운 폰트가 적용되지 않으면 해결 방법을 알려드립니다.
폰트가 저장된 경로를 주소창에 넣고 엔터를 하면 다운이 되죠. 이 상태라면 아래 코드를 폰트가 있는 같은 위치에 넣습니다. 그리고 휴대폰 해당 사이트를 새로고침해 보세요, 귀신같이 새로운 폰트가 보입니다.
<IfModule mod_headers.c>
<FilesMatch "\.(woff|woff2|ttf|otf|eot)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
주의할 점은 반드시 .htaccess 로 저장해야 합니다. 꼭 저장 파일이름을 확인해야 합니다. 그리고 특정 도메인만 허용한다면 Header set Access-Control-Allow-Origin "https://z23.kr" 이렇게 적으면 됩니다. 지금은 전체 허용입니다.
0 댓글