[square second] 블로그 제목과 글 제목에 "배달의민족 도현체" 를 적용하는 방법
사이드바의 블로그 제목과, 목록/본문 위에 있는 제목의 글씨체를 바꿔보겠습니다.
이 부분
적용할 글씨체는 우아한형제들에서 만든 "배달의민족 도현체"를 적용해보겠습니다.
배달의민족 도현체의 라이센스는 이곳에서 확인할 수 있고 다음은 우아한형제들, 배달의민족 도현체를 배포하는 페이지에 적힌 안내의 일부입니다.
배달의민족 글꼴의 지적재산권은 (주)우아한형제들에 있습니다.
배달의민족 글꼴은 개인 및 기업 사용자를 포함한 모든 사용자에게 무료로 제공되며 자유롭게 수정, 재배포가 가능합니다.
배달의민족 한나체 라이선스 보기 배달의민족 주아체 라이선스 보기
※ 도현체만 라이선스 안내가 빠져있기에, 문제 발생시 즉시 처리하겠습니다.
우선 제가 직접 변환한 배달의민족 도현체 웹폰트 파일을 받아주세요.
※ 개인용으로 만든거라 모든 문자를 지원하지는 않습니다.
※ 구버전 IE에선 폰트가 제대로 나오지 않습니다. 최신 브라우저를 사용해주세요.
다운받은 파일 업로드
압축을 해제하고 [ 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 h1
에 font-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
를 조절하면 됩니다.