웹 폰트를 사용해서 적용
HTML 공부하기 : Google 폰트 사용하기
폰트를 사용할 때 설치되어 있는 폰트만 사용하면 제한적이고 페이지가 지루해보일 수도 있다. 그렇기 때문에 인터넷에 있는 폰트를 사용해보려한다. 대표적으로 Google 폰트가 있다. https://fonts.google.com/ G..
awesomek.tistory.com
이번에는 내 PC에 있는 폰트를 사용해서 적용해보려한다.
요즘 무료로 배포하는 배달의 민족 주아체 폰트를 사용해보려한다.
아래 주아체 다운로드 링크
배달의민족 폰트 주아체 다운로드
배달의민족 주아체 다운로드 배달의민족 주아체는 붓으로 직접 그려서 만든 손글씨 간판을 모티브로 만들었습니다. 붓으로 그려 획의 굵기가 일정하지 않고 동글동글한 느낌을 주는 서체로 옛날 간판의 푸근함과 정겨움이 묻어나는 것이 특징입니다.
font.woowahan.com
위 링크로 가면 윈도우용과 MAC용으로 주아체를 다운받을 수 있다.
주아체 : 배달의 민족에서 만든 폰트로 붓으로 직접 그려서 만든 손글씨
획의 굵기가 일정하지 않고 동글동글한 느낌
프로젝트 폴더에 fonts 폴더를 만들고 거기에
다운로드 받은 파일을 넣어준다.
여기까지 준비 끝!
폰트 파일 사용하기
우선 기본 폰트를 위와 같다.
1. css 파일을 따로 만들어보자
|
@font-face { src : url("../fonts/BMJUA_ttf.ttf"); 파일 연결 (..은 현재 위치가 css 폴더이기에 상위로 폴더로 가기 위함) font-family: "jua" 위에 파일로 된 폰트는 이름을 jua라고 지정 }
h1 { html 파일의 h1을 꾸며준다. font-family: "jua"; } |
그럼 이쁜 배민 주아체를 적용할 수있다.
'IT > @HTML' 카테고리의 다른 글
| 프로그램 설치 없이 코딩하기(repl.it) (3) | 2020.03.04 |
|---|---|
| HTML 공부하기 : Span 태그 알아보기 (0) | 2020.02.29 |
| HTML 공부하기 : Google 폰트 사용하기 (1) | 2020.02.25 |
| HTML 공부하기 : 텍스트 스타일링(text-align, text-decoration, 폰트크기) (2) | 2020.02.24 |
| HTML 공부하기 : 텍스트 색깔 지정(htmlcolorcodes.com 활용하기) (4) | 2020.02.24 |
댓글