특정 부분만 폰트가 먹히지 않을 때

하루는 작업하다보니 특정 부분만 폰트가 기본인 맑은 고딕으로 되어있는 것 같아 확인을 해보니, 신기하게도 진짜 커스텀으로 넣은 폰트가 적용되지 않았더라. 안될꺼면 다 안되던가.. 특정 줄은 안되거나 같은 p태그 안에서 span안에 든 것만 안된다거나 하는 페이지가 있어서 당황했는데 이럴때는 이렇게 css를 바꿔주면 된다.

 

 

1. font-display 추가

@font-face {
  font-family: "Pretendard-Regular";
  src: url("/src/fonts/Pretendard-Regular.woff");
  font-weight: 400;
  font-style: normal;
  font-display: auto;
}

참고로 auto값은 커스텀 글꼴이 로드되기 전에는 화면에서 글자를 숨겨놓고, 이후에 보여주는 형식을 따라간다라는 의미임. 이렇게 하면 초장에 로드가 안될경우 로컬로 보여주는 일이 없음.