성동서체 웹폰트

성동서체는 서울시 성동구에서 제작한 폰트로 다음과 같이 무료로 사용할 수 있는 폰트입니다.

• 성동고딕체, 성동명조체의 지적재산권은 성동구청에 있습니다.
• 성동고딕체, 성동명조체 사용자들은 다른 이에게 자유롭게 배포할 수 있으나, 어떠한 경우에도 대가를 요구하거나 수정해서
  판매할 수 없으며, 배포된 그대로 사용해야 합니다.

웹폰트로의 변환이 위의 "배포된 그대로 사용해야 합니다"에서 제외되는지 여부가 분명치 않아 그동안 웹폰드로 변환해 배포하기를 꺼려했는데 제외된다면 알려주세요. 배포를 중지하도록 하겠습니다.

성동서체는 고딕체와 명조체 두 가지이며 고딕체는 Bold, Extra Bold, 명조체는 Bold, Regular가 있습니다. 명조체와 고딕체에 관해서는 이곳의 글을 참고하세요. 일반폰트 다운로드는 아래의 사이트에서 받을 수 있습니다.

바로가기

다음은 4가지 폰트의 압축파일입니다.

webfontkit-sungdong_gothic_b.zip

webfontkit-sungdong_gothic_eb.zip

webfontkit-sungdong_myungjo_b.zip

webfontkit-sungdong_myungjo_r.zip

사용법은 다음과 같습니다. 티스토리 블로그를 기준으로 설명드립니다.

압축을 해제하고 폴더로 들어가면 두 개의 웹폰트가 있습니다. 이전에는 svg, ttf, 등 여러 가지 포맷의 폰트가 있었으나 woff 포맷이 거의 모든 웹브라우저에서 지원되므로 이 포맷만 포함됩니다. woff2는 보다 효율적이고 압축율이 높아서 용량도 반 정도 되지만 아직 모든 웹브라우저에서 지원하지 않습니다. 

파이어폭스와 크롬 등 개발 업데이트가 원활한 웹브라우저만 지원되고 있습니다. 향후 모든 브라우저가 지원하게 되면 woff 포맷도 사라질 것입니다. 따라서 그때를 위해 woff2도 포함하는 것이 좋습니다.

두 가지 포맷의 폰트를 스킨의 업로드 폴더에 업로드 합니다. 그러면 경로가 images 폴더에 업로드 됩니다.

style.css 파일에는 상단에 다음과 같이 폰트 사용을 위해 정의합니다. 성동고딕 Bold 기준입니다.

@font-face {
    font-family: 'sungdong_gothic_b';
    src: url('./images/sungdong_gothic_b.woff2') format('woff2'),
         url('./images/sungdong_gothic_b.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

이 다음에 원하는 선택자에 대해 폰트를 정의하면 완료입니다.

body {
	font-family: 'sungdong_gothic_b';
}

다음은 폰트의 모양입니다.