@fant-face를 이용해서 눈누의 다양한 굵기의 폰트를 다 적용시켜보자
계기는 부트스트랩을 적용해서 html을 개발하고 있는데 폰트가 너무 밋밋해서 웹폰트를 찾다보니 나온 아래 두가지
1. 구글폰트
2. 눈누
구글폰트도 한글 지원이 되는 폰트가 있고 굵기에 따른 다양한 버전의 폰트를 손쉽게 적용할 수 있지만,
한글은 깨지는 폰트가 많다.
대신, 눈누에는 정말 다양한 폰트들이 제공되고 있었지만, 왠지 모르겠지만 굵기 변경이 어려웠다.
그전에는 적용되는 기본 폰트만 사용했는데 이번에 눈누의 font-weight를 바꾸는 방법을 찾았다!
물론, 기본으로 제공되는 웹폰트를 적용하고 font-weight를 높여보면 알겠지만, 소용없음. (굵게 1개와 기본 굵기가 끝)
위 폰트는 길형진님의 프리텐다스 폰트. 너무 깔끔해서 딱 내 취향이다.
근데 "웹폰트로 사용"을 보면, 보시다시피 한 버전밖에 제공되지 않는다. 분명 설명에는 굵기 9가지라는데 .... !!!
웹폰트 적용 방법
css 파일에서 아래 내용을 적용하면 된다. (정확히는 전체 body에 웹폰트 적용하는 방법)
눈누의 "웹폰트로 사용" 에 있는 내용 [붙여넣기] 후, 적용 범위에 따라 font-family를 작성해주면 됨
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
body{
font-family:Pretendard-Regular;
}
적용 결과
폰트 굵기 변경
굵기 변경의 핵심은 @font-face의 url을 변경해야 한다. 그래서 내가 원하는 굵기의 폰트 url을 어떻게 아는가?
페이지 소스 보기(F12) 기능을 이용한다면, 폰트 url을 알 수 있습니다.
아래는 font-weight:800 의 예시, 위와 비교해보면 url이 차이가 있다.
(테스트 해봤는데 @font-face에 정의하는 font-weight는 상관없는것 같다. 폰트url이 뭐냐에 따라 달라지는 것이지. font-weight을 아무리 굵게해도 변화없음)
@font-face {
font-family: 'Pretendard-ExtraBold';
src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
font-weight: 800;
font-style: normal;
}
body{
font-family:Pretendard-ExtraBold;
}
적용 결과
응용(@font-face 여러개)
다양한 웹폰트 적용하는 방법으로 @font-face를 여러개 선언하는 방법이다.
구글 폰트는 다양한 굵기가 한줄로 뚝딱이였지만 웹폰트는 이게 최선인것 같다..?
body와 table을 각각 다른 굵기로 적용했다.
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Pretendard-ExtraBold';
src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
font-weight: 800;
font-style: normal;
}
body{
font-family:Pretendard-ExtraBold;
}
table{
font-family:Pretendard-Regular;
}
적용 결과
댓글