이 블로그는 더이상 운영되지 않고 Archive 용도로 사용되고 있습니다.
새로운 블로그를 방문해주세요.

[square second] 블로그 제목과 글 제목에 "배달의민족 도현체" 를 적용하는 방법


사이드바의 블로그 제목과, 목록/본문 위에 있는 제목의 글씨체를 바꿔보겠습니다.



제목이 부분



적용할 글씨체는 우아한형제들에서 만든 "배달의민족 도현체"를 적용해보겠습니다.


배달의민족 도현체의 라이센스는 이곳에서 확인할 수 있고 다음은 우아한형제들, 배달의민족 도현체를 배포하는 페이지에 적힌 안내의 일부입니다.


배달의민족 글꼴의 지적재산권은 (주)우아한형제들에 있습니다.

배달의민족 글꼴은 개인 및 기업 사용자를 포함한 모든 사용자에게 무료로 제공되며 자유롭게 수정, 재배포가 가능합니다.

배달의민족 한나체 라이선스 보기   배달의민족 주아체 라이선스 보기


※ 도현체만 라이선스 안내가 빠져있기에, 문제 발생시 즉시 처리하겠습니다.


우선 제가 직접 변환한 배달의민족 도현체 웹폰트 파일을 받아주세요.

※ 개인용으로 만든거라 모든 문자를 지원하지는 않습니다.

※ 구버전 IE에선 폰트가 제대로 나오지 않습니다. 최신 브라우저를 사용해주세요.



배달의민족 도현체.zip



다운받은 파일 업로드

압축을 해제하고 [ HTML/CSS편집 → 파일 업로드 ]에 파일을 전부 올려주세요.


업로드


CSS 편집

CSS 텝으로 넘어와 파일 상단의

@charset "utf-8";
/*@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);*/

이 소스 바로 다음줄에 아래 소스를 추가해주세요.

@import url("./images/font-BMDOHYEON-wallel.css");



이제 폰트를 적용해보겠습니다.



66번째 줄에 있는 #sidebar h1font-family: "BMD", sans-serif;를 추가해주세요. (대소문자 주의)

#sidebar h1 { margin: 0 0 55px; padding: 0 10px; text-align: center; font-size: 20px; font-family: "BMD", sans-serif; font-weight: 400; line-height: 200%; color: #666; }



그 다음



198 ~ 200번째 줄에 있는

.head h1,
.head h2,
.head span { display: inline-block; margin: 0 20px 50px; padding: 0 5px 10px; font-size: 20px; font-family: "BMD", sans-serif; font-weight: 500; color: #444; line-height: 160%; border-bottom: 1px dashed #ccc; text-shadow: 1px 1px #dedede; word-break: break-word; }

이 소스에도 위와 같이 폰트를 추가하면 됩니다.



이제 [ 저장 ]을 눌러 마무리하면 끝입니다.



완료



굿, 잘 나오는군요.


※ 글씨 크기는 font-size를 조절하면 됩니다.