폰트관련 정리

@font-face

쇼핑몰 프로젝트 진행중 내가 원하는 폰트로 바꾸고 싶어졌다

https://noonnu.cc/

눈누

여기서 프리텐다드 폰트가 맘에들어서 적용시키고 싶었다

 

폰트 코드

@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;
}

하지만 적용시키는 방법이 뭔지 애매해 정확히 알고 싶어 mdn에있는 문서를 찾아보았다

@font-face를 사용하면 컴퓨터에 설치된 폰트만 사용해야하는 제약이 없어지고  src 에 폰트 위치만 정의해준다면 원하는폰트를 자유롭게 사용할 수 있게된다고 한다. 바로 사용해봤다.

@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;
}

.item {
       font-family: 'Pretendard-Regular', serif;
       margin-top: 20px;
       width: 100%;
       height: 50%;
                }

나는 .item 에 폰트를 정의해 주었는데 같은 파일안에 @font-face를 정의해주고 item 안쪽에 위에 정의한 폰트를 입력해주기만 하면 적용된다! 여기서 ,(콤마) 옆의 serif는 폰트를 찾지 못할경우를 대비해 적용할 폰트를 의미하는 것이다.

(2024-04-24 기록)

---