nextJS, React에서 폰트가 뿌옇게 나오네?

next에서 폰트를 적용하다보니 뭔가 폰트가 조금 뿌옇게 나오는 것 같았다.

 

물론 이런저런 문제들도 있었다.

작은 공간에 큰 폰트가 들어간 경우도 있었고, 폰트사이즈는 고정되있는데, line-height가 문제인 경우도 있었는데, 이번에는 조금 뭔가 안맞는 느낌이 들었다.

 

일단 해결은 했는데, 기록용으로 남겨야겠다라는 생각을 했다.

 

우선 @font-face의 설정값 문제였다.

 

/* roboto  */
@font-face {
  font-family: 'Roboto';
  src: url('./assets/fonts/Roboto-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0061-007A;
}

@font-face {
  font-family: 'Roboto';
  src: url('./assets/fonts/Roboto-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0061-007A;
}
@font-face {
  font-family: 'Roboto';
  src: url('./assets/fonts/Roboto-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0061-007A;
}

@font-face {
  font-family: 'Roboto';
  src: url('./assets/fonts/Roboto-Thin.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0061-007A;
}

@font-face {
  font-family: 'Pretendard';
  src: url('./assets/fonts/Pretendard-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./assets/fonts/Pretendard-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
  font-family: 'Pretendard';
  src: url('./assets/fonts/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
  font-family: 'Pretendard';
  src: url('./assets/fonts/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
  font-family: 'Pretendard';
  src: url('./assets/fonts/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
  font-family: 'Pretendard';
  src: url('./assets/fonts/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}
@font-face {
  font-family: 'Pretendard';
  src: url('./assets/fonts/Pretendard-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
  font-family: 'Pretendard';
  src: url('./assets/fonts/Pretendard-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

@font-face {
  font-family: 'Pretendard';
  src: url('./assets/fonts/Pretendard-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  unicode-range: U+AC00-D7A3, U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
}

각 폰트에 맞는 weight를 주었는데, 일단 정상적으로 폰트는 보였다.

 

디자이너님께서 스타일을 정리를 해주시긴 했으나, 지금 상황이 상황인지라 디자인은 대략적으로 맞추고 베타 후에 좀 전체적인 정리를 해야겠다.

 

죄송합니다.. 디자이너님..