작성일자
카테고리 폰트/한글폰트

무료 폰트인 서울시체를 웹폰트로 사용하기 위해 몇년 전부터 구글에 연락을 했지만 서울시로부터 폰트만 받고 웹폰트 작업은 이뤄지고 있지 않고 있습니다. 그래서 어쩔 수 없이 웹폰트로 만들어봤습니다. 한글 폰트를 웹폰트로 사용하기란 참 어렵죠. 영문 폰트와는 달리 글자 수도 많아서 개인이 만들기는 거의 불가능하죠. 그나마 무료로 공개된 폰트는 제한이 많습니다. 상업용으로 사용할 수 없다는 것이죠. 네이버에서 무료로 공개된 폰트 목록을 보면 왜 무료로 공개했는지 의심스러울 정도의 제한입니다. 비영리 목적으로 사용하라는데 웹사이트가 대부분이 영리를 목적으로 하는 것이므로 일반 웹사이트에서는 사용할 수 없죠. 



웹폰트 만드는 방법은 파일 용량을 줄이고 여러 형태의 확장자를 가진 폰트 파일로 만드는 과정을 거쳐야 하는데 한글 폰트는 용량도 커서 줄이기도 어렵습니다. 다행히 폰트 다람쥐(Font Squirel)라는 사이트에서 쉽게 만들 수 있습니다. 다만 용량이 2메가를 넘으면 생성되지 않습니다.



압축을 풀면 위처럼 돼있습니다. html 파일을 클릭하면 데모가 나옵니다. 



한글은 제가 추가했습니다. 멋진 한글입니다. 특히 한강체는 영문도 아주 좋아보입니다.



아래로 스크롤하면 글자 크기에 따른 모양도 볼 수 있습니다. 압축 파일만 제공해도 사용법을 잘 아시는 분은 바로 사용할 수 있지만 모르시는 분들을 위해 워드프레스 기준으로 설명드립니다. 



우선 테마에 fonts 폴더를 만들고 압축 해제한 폰트 폴더를 복사해 붙여넣습니다. 만드는 김에 상업용으로도 가능한 몇 가지를 추가했습니다.



stylesheet.css 파일을 열면 위처럼 돼있습니다. 이 파일을 기본 스타일시트 상단에 복사해 붙여넣습니다. 그러면 아래처럼 됩니다.



폰트 이름이 길므로 적당하게 수정하고 경로도 수정합니다.



원하는 선택자에 대해 폰트를 설정하면 됩니다.



서울시체는 제목용으로 만들어져서 큰 사이즈의 글자에 사용하면 좋습니다. 글 본문용으로는 적합하지 않습니다.



남산체도 폰트 사이즈가 30px 이상은 돼야 좋아보입니다. 다음체는 본문에 사용해도 좋은데 좀 굵어보입니다. 그동안 단조로운 나눔고딕체만 사용했는데 여러 곳에서 다양한 폰트를 사용하면 변화를 줄 수 있습니다.



webfontkit-daum.zip


webfontkit-hangang-b.zip


webfontkit-hangang.zip


webfontkit-namsan-b.zip


webfontkit-namsan.zip


webfontkit-youth.zip

 


서울 서체 정체


SeoulHangangJungB.zip


SeoulHangangJungEB.zip


SeoulHangangJungL.zip


SeoulHangangJungM.zip


SeoulNamsanJungB.zip


SeoulNamsanJungEB.zip


SeoulNamsanJungL.zip


SeoulNamsanJungM.zip


SeoulNamsanJungvert.zip


서울 서체 장체


SeoulHangangJangB.zip


SeoulHangangJangBL.zip


SeoulHangangJangEB.zip


SeoulHangangJangL.zip


SeoulHangangJangM.zip


SeoulNamsanJangB.zip


SeoulNamsanJangBL.zip


SeoulNamsanJangEB.zip


SeoulNamsanJangL.zip


SeoulNamsanJangM.zip



구글 드라이브


구글 드라이브에 파일을 업로드 했으니 스타일시트에 아래처럼 사용할 수도 있습니다. 경로가 길어서 구글의 URL 단축기(Shortner)를 사용해봤지만 적용이 안됩니다. 서버에 설치하면 보다 짧아지겠는데 제 서버는 트래픽 제한이 있어서 많은 링크가 있을 경우 감당하지 못할 것 같습니다.


@import url("https://googledrive.com/host/0BxmAw3HA4YGCfjR0SDF0a0gtQ1pINkRiRmZqOEU0enFLRmpCTGJ6S1dfeWRGd3FNOGNmNHc/seoul-hangang-jung-b.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfkFEX0lPeTlVWVBTVjJBNFRDREhIS1o0Ny1XRml3dENtcnFFZU5GSzcxTjg/seoul-hangang-jung-eb.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCflB5SWRXT3dRa0s2U2ZmSWNiXzVmTXVHX2FEemNtdU1VcDEtX3RHNzBNMms/seoul-hangang-jung-l.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfnRnTzdKbzd1UFYzb1o4S2FydGsyZzFkRzFOcXRKSWpxX29lNXVnV213UDg/seoul-hangang-jung-m.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfk5LdE5KZ1AyQXFuYTBDVm8xQVp2OW91YVRGZW1ySHlDbmlaNE5CRlBERlU/seoul-namsan-jung-b.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfkMxbjY2QnN2bTdNbEN3MzhacGs4dkN0eXlaMEJmVFVjVG5OVndTOWpRUDQ/seoul-namsan-jung-eb.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfi0xaFR1bFBGM1g1YUdmQWpmVFZvLXJNMUQ3YWNCalhMUHdpVjZoUXpfaWc/seoul-namsan-jung-l.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfjVJY2FjdUppTEpJMUVpeHlnclZVdnlvbnJ2c3ctNzItTEQ2WDY3dDJiMDA/seoul-namsan-jung-m.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfmQ0a05kbkZJbXhQMmJXQ0dGS0NnLXFSQmZ4bUxpc2NqRDBBeTM1eEVGV1E/seoul-namsan-jung-vert.css");


@import url("https://googledrive.com/host/0BxmAw3HA4YGCfjZ6MDYxRE9XSWNEWS1KWlJtNTA3aUVXSlAzSl9qcnVsZDl4NVhrT2k3OFU/seoul-hangang-jang-b.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfnRaN3FhMHRiQWhwZjRWcjRHa1F3WjBoVHl6X0xTU09FWFFidlJmdFVFeVk/seoul-hangang-jang-bl.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfk54bG8tYmR2d1RBTnd1eFYtTFFSdDNRT2xoc18xcFhlSXpXaXNJd2lXTEU/seoul-hangang-jang-eb.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfm42anB4c3Zua19DbTYtNkFZRDZEMld0N3RhclpQckMwM2trRjZaTXpxTGM/seoul-hangang-jang-l.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfmYzbmVDZEVFSVdtSW5xLXJOOFo1aDZJZ1ZENngwNDJqVmdyM2dFUm1vQkk/seoul-hangang-jang-m.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfnNDMS13TmFBVUMzLXFhY2ctY3kxVTBJMjRJelNfU1pYd2tMLThqOWU1SlU/seoul-namsan-jang-b.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfmdpYXd3WHA1MWRmbTZDcTllU3Z3OUhsYXktdHhZY3k2Z3VtT2ROQXhYdzA/seoul-namsan-jang-bl.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfklGTXVUdXVFOWxwZDktclAxcG1nWkdDcHZIR3p4QWRUSGFzQ2lEcmJydkE/seoul-namsan-jang-eb.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfkVZa1lYbHdMNE5BcjNXQ09lLTE5RjFZOG43dDlIUUNnOHFoQVJ4aFdmV00/seoul-namsan-jang-l.css");

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfmg0S25wNWdoUGtCeFJUUnZKZFE0UndqUG1rc0h5dGpCckNDOThBR1NlMnM/seoul-namsan-jang-m.css");


CSS 예제


.seoul-hangang-jung-b { font-family: seoul-hangang-jung-b !important; font-size:38px; }

.seoul-hangang-jung-eb { font-family: seoul-hangang-jung-eb !important; font-size:38px; }

.seoul-hangang-jung-l { font-family: seoul-hangang-jung-l !important; font-size:38px; }

.seoul-hangang-jung-m { font-family: seoul-hangang-jung-m !important; font-size:38px; }

.seoul-namsan-jung-b { font-family: seoul-namsan-jung-b !important; font-size:38px; }

.seoul-namsan-jung-eb { font-family: seoul-namsan-jung-eb !important; font-size:38px; }

.seoul-namsan-jung-l { font-family: seoul-namsan-jung-l !important; font-size:38px; }

.seoul-namsan-jung-m { font-family: seoul-namsan-jung-m !important; font-size:38px; }

.seoul-namsan-jung-vert { font-family: seoul-namsan-jung-vert !important; font-size:38px; }


.seoul-hangang-jang-b { font-family: seoul-hangang-jang-b !important; font-size:38px; }

.seoul-hangang-jang-bl { font-family: seoul-hangang-jang-bl !important; font-size:38px; }

.seoul-hangang-jang-eb { font-family: seoul-hangang-jang-eb !important; font-size:38px; }

.seoul-hangang-jang-l { font-family: seoul-hangang-jang-l !important; font-size:38px; }

.seoul-hangang-jang-m { font-family: seoul-hangang-jang-m !important; font-size:38px; }

.seoul-namsan-jang-b { font-family: seoul-namsan-jang-b !important; font-size:38px; }

.seoul-namsan-jang-bl { font-family: seoul-namsan-jang-bl !important; font-size:38px; }

.seoul-namsan-jang-eb { font-family: seoul-namsan-jang-eb !important; font-size:38px; }

.seoul-namsan-jang-l { font-family: seoul-namsan-jang-l !important; font-size:38px; }

.seoul-namsan-jang-m { font-family: seoul-namsan-jang-m !important; font-size:38px; }





저작자 표시 비영리 변경 금지
신고
BlogIcon 구름군단

서울시 폰트 이쁘네요~^^ 게다가 웹폰트 넣는 것까지 알려주셔서 감사합니다.^^ 잘보고 가요~

비밀댓글입니다

BlogIcon 베누시안

위 내용대로 파일을 이용해 직접 만들어보세요. 그런다음 자신의 폰트로 연구해보세요.

비밀댓글입니다

비밀댓글입니다

BlogIcon 베누시안

블로그 글을 통째로 복사해 퍼가는 사람들 때문에 그런 것입니다. 코드는 복사해 사용해도 됩니다.

퍼블리셔

관리자의 승인을 기다리고 있는 댓글입니다

비밀댓글입니다

왈라비

큰 도움 받고 가요. 감사합니다.

BlogIcon neKKuyam

안녕하세요 친절한 설명 덕분에 무료폰트인 부산바다체를 이용하여 웹폰트로 사용해보았습니다. 그런데 피시에서는 잘 나오는데 모바일로는 폰트가 적용이 되지않습니다. 혹시 하여 전에 배포하셨던 조선일보명조 폰트로도 시도해보았는데 잘 출력됩니다. 혹시 다람쥐 사이트에서 변환시길 때 설정에 주의 사항이 있나요? 왜 이러는 건지알 수 있을까요

BlogIcon 베누시안

별도의 설정은 없고 데스크탑에서 제대로 나오면 모바일에서도 나오는게 정상입니다. 모바일에서의 폰트 설정이 다른 것으로 돼있을 수도 있습니다.

CSS의 @media 규칙이 어떻게 돼있는지 확인해보세요.

티스토리 툴바