[보드픽] 웹 폰트 적용 문제

'프리텐다드' 폰트로 디자인이 넘어와서 '눈누'사이트에서 웹폰트를 가져와서 개발을 진행했다.
내 노트북과 폰에서는 폰트가 잘 적용되어서 그렇게 배포까지 했는데
팀원분들 중 몇몇 분들은 폰트가 적용이 안된 곳이 있다 하셨다.

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

거의 항상 구글 폰트에서 원하는 굵기들을 선택해 Embed Code를 하나만 import하면 됐어서 몰랐는데
눈누에서는 해당 @font-family 하나만 적용시켜서는 적용이 되지 않았다.

"font-weight에 따라 font-family 이름이 다르다."

눈누 사이트에 보면 font-weight 마다 예시가 있는데
F12 페이지 소스에서 weight 마다의 font-family 이름을 볼 수 있다.

• font-weight : 400
  
• font-weight : 600
  
• font-weight : 700
  

그래서 @font-face 속 font-family이름을 변경해서 적용시켜줬다!

그렇게 해결되는 줄 알았으나 똑같이 안됨ㅎ

알고보니
"url에 있는 font-family 이름을 수정해줘야함"
→ url을 수정해주지 않으면 font-weight 아무리 바꿔도 적용안됨..

무튼 사용하고자하는 @font-face를 불러와

@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-SemiBold";
  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff")
    format("woff");
  font-weight: 600;
  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;
}

이렇게 넣어주니 해결되었다!😎