font-face 폰트가 적용안될 때

@font-face는 사용자 컴퓨터에 폰트가 설치되어있지 않아도, 서버에서 내려받아서 사용할 수 있는 방법이다.

@font-face{
  font-family:"폰트이름";
  src:local("폰트이름1"), local("폰트이름2"), url("폰트주소") format("폰트포맷");
}

font는 보통 global.css에서 적용한다.

 

해당 프로젝트에서는 src/styles/global.css에 있다.

@font-face {
  font-family: 'Maplestory';
  src: url('../../public/fonts/MaplestoryLight.otf') format('otf');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Maplestory';
  src: url('../../public/fonts/MaplestoryBold.otf') format('otf');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

위와 같은 코드로 적용이 되어 있었다.

여기서 문제점이 보인다.
- font-weight가 두 개 다 normal로, 기본이 아래 Bold체가 되고 있던 것이다!

하지만 다른 문제가 있었다. 메이플체로 적용이 되고 있음에도 불구하고, 

크롬창의 네트워크를 확인하여도, 메이플체가 뜨지 않았다.

 

이유는?
폰트 포맷이 잘못 되었기 때문이다!

폰트 포맷을 알아보자~~

폰트 확장자명	폰트포맷
폰트명.woff	woff
폰트명.eot	embedded-opentype
폰트명.woff	woff2
폰트명.otf	opentype
폰트명.svg	svg

위와 같이 확장자에 따라 폰트 포맷이 다르다!

현재 otf 폰트를 otf포맷타입으로 주고있었는데, 포맷에는 otf가 없었다.

 

@font-face {
  font-family: 'Maplestory';
  src: url('../../public/fonts/MaplestoryLight.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Maplestory';
  src: url('../../public/fonts/MaplestoryBold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

위와 같이 format을 otf는 opentype으로 바꾸어 주었으며, font에 따라 weight의 두께를 조절해주었다. 

 

위 문제는 윈도우에서는 발생하지 않은 것으로 확인되었다.

즉, 윈도우에서는 글씨체가 적용이 되고, 맥북에서는 적용이 안되고 있었던 것이다.. 

맥북에서는 에러를 발생하므로, 폰트 포맷 설정에 주의하자!