무료 폰트인 서울시체를 웹폰트로 사용하기 위해 몇년 전부터 구글에 연락을 했지만 서울시로부터 폰트만 받고 웹폰트 작업은 이뤄지고 있지 않고 있습니다. 그래서 어쩔 수 없이 웹폰트로 만들어봤습니다. 한글 폰트를 웹폰트로 사용하기란 참 어렵죠. 영문 폰트와는 달리 글자 수도 많아서 개인이 만들기는 거의 불가능하죠. 그나마 무료로 공개된 폰트는 제한이 많습니다. 상업용으로 사용할 수 없다는 것이죠. 네이버에서 무료로 공개된 폰트 목록을 보면 왜 무료로 공개했는지 의심스러울 정도의 제한입니다. 비영리 목적으로 사용하라는데 웹사이트가 대부분이 영리를 목적으로 하는 것이므로 일반 웹사이트에서는 사용할 수 없죠.
웹폰트 만드는 방법은 파일 용량을 줄이고 여러 형태의 확장자를 가진 폰트 파일로 만드는 과정을 거쳐야 하는데 한글 폰트는 용량도 커서 줄이기도 어렵습니다. 다행히 폰트 다람쥐(Font Squirel)라는 사이트에서 쉽게 만들 수 있습니다. 다만 용량이 2메가를 넘으면 생성되지 않습니다.
압축을 풀면 위처럼 돼있습니다. html 파일을 클릭하면 데모가 나옵니다.
한글은 제가 추가했습니다. 멋진 한글입니다. 특히 한강체는 영문도 아주 좋아보입니다.
아래로 스크롤하면 글자 크기에 따른 모양도 볼 수 있습니다. 압축 파일만 제공해도 사용법을 잘 아시는 분은 바로 사용할 수 있지만 모르시는 분들을 위해 워드프레스 기준으로 설명드립니다.
우선 테마에 fonts 폴더를 만들고 압축 해제한 폰트 폴더를 복사해 붙여넣습니다. 만드는 김에 상업용으로도 가능한 몇 가지를 추가했습니다.
stylesheet.css 파일을 열면 위처럼 돼있습니다. 이 파일을 기본 스타일시트 상단에 복사해 붙여넣습니다. 그러면 아래처럼 됩니다.
폰트 이름이 길므로 적당하게 수정하고 경로도 수정합니다.
원하는 선택자에 대해 폰트를 설정하면 됩니다.
서울시체는 제목용으로 만들어져서 큰 사이즈의 글자에 사용하면 좋습니다. 글 본문용으로는 적합하지 않습니다.
남산체도 폰트 사이즈가 30px 이상은 돼야 좋아보입니다. 다음체는 본문에 사용해도 좋은데 좀 굵어보입니다. 그동안 단조로운 나눔고딕체만 사용했는데 여러 곳에서 다양한 폰트를 사용하면 변화를 줄 수 있습니다.
webfontkit-daum.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; }
