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

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

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

사이트 이미지
웹사이트

회원관리 사이트

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

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

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

사이트 이미지
쇼핑몰

해외 쇼핑몰

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

사이트 이미지
쇼핑몰

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

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

포트폴리오 보기

블로그 인기글

커스텀 디자인

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

Brizy Pro

페이지 빌더

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

Elementor Pro

페이지 빌더

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

Advanced Custom Field Pro

사용자 정의 필드

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

Pods

사용자 정의 콘텐츠 타입

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

블로그

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


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


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


성동서체는 고딕체와 명조체 두 가지이며 고딕체는 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';

}


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