[FE] 프로젝트의 기본 폰트를 Spoqa Han Sans Neo로 설정 #47
Conversation
웹팩 번들링 과정에서 폰트 파일 경로 문제를 해결하기 위해 require를 사용하여 폰트 파일을 로드하도록 수정
| @@ -102,6 +106,7 @@ const globalStyles = css` | |||
| width: 100%; | |||
| min-height: 100vh; | |||
|
|
|||
| font-family: 'Spoqa Han Sans Neo', sans-serif; | |||
There was a problem hiding this comment.
[Q]
제 육안상으로 확인했을 때, sans-serif를 붙였을 때와 붙이지 않았을 때의 차이가 없어 보이는데 뒤에 붙여주신 이유가 있을까요?!
There was a problem hiding this comment.
sans-serif를 font-family 속성에 추가한 이유는 Spoqa Han Sans Neo 폰트가 로드되지 않거나 사용할 수 없는 경우를 대비한 대체 폰트로 지정하기 위함입니다.
font-family: 'Spoqa Han Sans Neo', sans-serif;위 코드에서 브라우저는 먼저 Spoqa Han Sans Neo 폰트를 시도하고, 만약 이 폰트를 사용할 수 없다면 시스템의 기본 sans-serif 폰트를 사용합니다. 이를 통해 폰트 로딩 실패나 폰트가 없는 환경에서도 텍스트를 서비스에서 의도한대로 표시되도록 할 수 있습니다!
자세한 내용은 MDN 기본적인 텍스트 및 글꼴 스타일링 문서의 '글꼴 스택' 부분을 참고하면 좋습니다😊
There was a problem hiding this comment.
Spoqa Han Sans Neo 폰트를 사용할 수 없으면, 브라우저 기본 폰트를 사용한다고 하네요 :)
낙타랑 같은 의견으로 sans-serif 폰트를 명시하지 않아도 괜찮을 것 같습니다!
There was a problem hiding this comment.
브라우저에서 Spoqua Han Sans Neo 글꼴 자체가 호환되지 않을 경우를 대비해서 sans-serif를 사용하신 것으로 이해했습니다! 좋아요 👍
There was a problem hiding this comment.
사파리 브라우저의 경우 기본으로 AppleMyungjo(명조체, serif)를 사용하고 있기 때문에
폰트를 설정해주지 않으면, 아래 사진처럼 보입니다.
우리 서비스에서 사용하는 폰트는 sans-serif 계열이기에 sans-serif를 명시해 두었습니다
아래 글 내용이 너무 좋네요👏👏 시간 되실 때 읽어보는 거 추천합니다~~
https://velog.io/@seop/Safari사파리-에서-폰트가-이상하게-보일경우-해결법-CSS-font-family-속성-총정리
| @@ -102,6 +106,7 @@ const globalStyles = css` | |||
| width: 100%; | |||
| min-height: 100vh; | |||
|
|
|||
| font-family: 'Spoqa Han Sans Neo', sans-serif; | |||
There was a problem hiding this comment.
sans-serif를 font-family 속성에 추가한 이유는 Spoqa Han Sans Neo 폰트가 로드되지 않거나 사용할 수 없는 경우를 대비한 대체 폰트로 지정하기 위함입니다.
font-family: 'Spoqa Han Sans Neo', sans-serif;위 코드에서 브라우저는 먼저 Spoqa Han Sans Neo 폰트를 시도하고, 만약 이 폰트를 사용할 수 없다면 시스템의 기본 sans-serif 폰트를 사용합니다. 이를 통해 폰트 로딩 실패나 폰트가 없는 환경에서도 텍스트를 서비스에서 의도한대로 표시되도록 할 수 있습니다!
자세한 내용은 MDN 기본적인 텍스트 및 글꼴 스타일링 문서의 '글꼴 스택' 부분을 참고하면 좋습니다😊
| @@ -102,6 +106,7 @@ const globalStyles = css` | |||
| width: 100%; | |||
| min-height: 100vh; | |||
|
|
|||
| font-family: 'Spoqa Han Sans Neo', sans-serif; | |||
There was a problem hiding this comment.
Spoqa Han Sans Neo 폰트를 사용할 수 없으면, 브라우저 기본 폰트를 사용한다고 하네요 :)
낙타랑 같은 의견으로 sans-serif 폰트를 명시하지 않아도 괜찮을 것 같습니다!
| @@ -4,30 +4,30 @@ export const fontFaces = css` | |||
| @font-face { | |||
| font-family: 'Spoqa Han Sans Neo'; | |||
| font-weight: 100; | |||
| src: url('../assets/fonts/SpoqaHanSansNeo-Thin.woff2') format('woff2'); | |||
| src: url(${require('../assets/fonts/SpoqaHanSansNeo-Thin.woff2')}) format('woff2'); | |||
There was a problem hiding this comment.
이전에 프로젝트에서 웹 폰트를 적용했을 때 저희와 같은 문제가 발생했었는데 문자열을 인식하지 못해서 생겼던 것이였군요...😭
빙봉 덕분에 꿀팁 알아갑니다~
관련 이슈
작업 내용
각 폰트 스타일에 대해
.woff2파일을 추가하였습니다.@font-face규칙을 사용하여 'Spoqa Han Sans Neo' 폰트 패밀리를 정의하였습니다.결과 (쉬운 결과 비교를 위해서 사파리 브라우저 테스트 사진을 첨부합니다.)
폰트 적용 전
폰트 적용 후
특이 사항
리뷰 요구사항 (선택)
해당 작업과 관련된 내용을 notion에 기록해 보았습니다. notion 링크