워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그 인기글

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

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



웹폰트 만드는 방법은 파일 용량을 줄이고 여러 형태의 확장자를 가진 폰트 파일로 만드는 과정을 거쳐야 하는데 한글 폰트는 용량도 커서 줄이기도 어렵습니다. 다행히 폰트 다람쥐(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; }