리액트) 폰트 설정 방법 - 글로벌스타일이 아닌 index.css 파일에

 1. 문제 상황

- assets -> fonts 폴더에 다운받은 폴더를 저장했다.

- 글로벌 스타일에 아래와 같이 폰트를 설정했다.

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyled = createGlobalStyle`
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url('../../assets/font/SpoqaHanSansNeo-Light.woff2') format('woff2'),
        url('../../assets/font/SpoqaHanSansNeo-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url('../../assets/font/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
        url('../../assets/font/SpoqaHanSansNeo-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url('../../assets/font/SpoqaHanSansNeo-Bold.woff2') format('woff2'),
        url('../../assets/font/SpoqaHanSansNeo-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url('../../assets/font/SpoqaHanSansNeo-Regular.woff2') format('woff2'),
        url('../../assets/font/SpoqaHanSansNeo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url('../../assets/font/SpoqaHanSansNeo-Thin.woff2') format('woff2'),
        url('../../assets/font/SpoqaHanSansNeo-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
  ${reset}
  html {
    font-size: 10px;
  }
  
  *{
    font-family: "Spoqa Han Sans Neo", sans-serif;
    font-weight: 400;
    box-sizing: border-box;
  }
  
  button{
    background: inherit;
    border:none;
    box-shadow:none;
    border-radius:0;
    padding:0;
    overflow:visible;
    cursor:pointer
    
  }
  .hidden {
    position: relative;
    z-index: -1px;
    display: inline-block;
    overflow: hidden;
    width: 1px;
    height: 1px;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    word-break: initial;
    word-wrap: initial;
  }
`;

export default GlobalStyled;

 

하지만, 결과는 아래 상황처럼 개발자 도구의 font-family 에는 폰트가 잘 설정이 되었지만

렌더링된 글꼴에는 윈도우 기본 글꼴인 Malgun Gothic으로 나와있었다.

결국 글씨체...적용이 안된것이다.

 

 2. 트러블슈팅 

1) 캐스캐이딩 우선순위 문제

- 우리는 기존에 에스터리스크 * 에 font-family를 적용했으니 우선순위에서 밀렸을 것이다.

* 가 아닌 html,body 부분에 font-family를 설정해보자

  html, body {
    font-family: "Spoqa Han Sans Neo", sans-serif;
    font-weight: 400;
  }

 

2) 경로 문제

 

- 이미지, 폰트 같은 것들의 경로를 바로 src 부분에 입력해서 쓰면 assets 경로가 아래처럼 바뀐다. 

- 따라서, 파일을 import해서 가져와야한다.

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';
import spoqaThin from '../assets/font/SpoqaHanSansNeo-Thin.woff2';
import spoqaLight from '../assets/font/SpoqaHanSansNeo-Light.woff2';
import spoqaRegular from '../assets/font/SpoqaHanSansNeo-Regular.woff2';
import spoqaMedium from '../assets/font/SpoqaHanSansNeo-Medium.woff2';
import spoqaBold from '../assets/font/SpoqaHanSansNeo-Bold.woff2';

const GlobalStyled = createGlobalStyle`
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url(${spoqaThin}) format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url(${spoqaLight}) format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url(${spoqaRegular}) format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url(${spoqaMedium}) format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url(${spoqaBold}) format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
  ${reset}
  html,body {
    font-family: "Spoqa Han Sans Neo", sans-serif;
    font-weight: 400;
    font-size: 10px;
  }

 

3) index.css 가 아니라 글로벌 스타일에 폰트를 설정할 경우...

 

- 페이지 이동이나, 새로고침시에 폰트를 매번 다시 불러와야한다.(왜냐하면, jsx 파일에 있기 때문에 할때마다 다운받아와야함)

- So, index.css에 폰트를 설정하면 네트워크 확인시에 304로 불러와진다.

- 이 뜻은 추후에 다시 로드하지 않겠다는 뜻이다.

/* index.css */

@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url('./assets/font/SpoqaHanSansNeo-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url('./assets/font/SpoqaHanSansNeo-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url('./assets/font/SpoqaHanSansNeo-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url('./assets/font/SpoqaHanSansNeo-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Spoqa Han Sans Neo';
    src: url('./assets/font/SpoqaHanSansNeo-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

 

4) 마지막은 글씨체 파일 다시 다운로드

 

 

 3. 트러블슈팅 성공!