부트스트랩 폰트 변경
OKKY 사이트를 참고하여 게시판을 만들고 있기 때문에 OKKY의 기본 폰트인 Pretendard를 부트스트랩 기본 폰트로 변경하고자 한다.
부트스트랩 커스터마이징의 기본적인 방법은 🔗 [Bootstrap 5] 부트스트랩 버튼 색상 커스텀하기에서 다루었다.
웹 폰트 다운로드
🔗 눈누에서 Pretendard 폰트를 다운로드하기 위한 @font-face 코드를 복사해온다. 내가 못 찾는것인지는 모르겠지만 기본 폰트 패밀리인 Pretendard-Regular 외에는 페이지 소스 보기를 통해서 코드를 찾아야 한다.
.
.
.
@font-face {
font-family: 'Pretendard-Regular';
src: url('https://fastly.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-Bold';
src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
.
.
.나는 부트스트랩 커스터마이징 CSS 파일인 custom.css가 아닌, 별도의 style.css 파일에 @font-size 코드를 삽입했다. 합쳐도 상관 없겠지만 나는 별도의 CSS 파일이 이미 있어서 나누었다. <link>를 통해 스타일시트를 연결해주는 것도 잊지 말자.
적용하기
$font-family-base: Pretendard-Regular;커스텀 전용 SCSS 파일에서 $font-family-base 변수 값을 Pretendard-Regular로 설정해 주었다.
이렇게 하면 @font-face에서 지정한 것에 따라 font-weight가 400인 Pretendard-Regular가 페이지의 기본 폰트 패밀리가 된다.
SCSS를 컴파일하여 변경사항을 CSS 파일에 적용한 뒤 결과를 확인해보면 잘 적용된 것을 확인할 수 있다.
🔗 Reference
