[React] styled components에서 폰트 적용하기

우선 폰트는 무료 폰트 사이트인 눈누에서 찾아서 다운로드 받았다

눈누

 

폰트를 다운받으러 가면 여러 확장자로 폰트를 제공하는 것을 볼 수 있다. 각 확장자의 의미는 다음과 같다.

• ttf(true type font): 2차원 베지어 방식으로 일반적인 문서 작업에 사용. 
• otf(open type font): 3차원 베지어 방식으로 주로 그래픽 작업과 고해상도 출력에 사용
• woff(web open font format): 웹에서 사용하는 포맷

로딩 속도는 woff2 > woff > ttf

 

cdn을 사용하는 것보다 직접 다운해서 넣는 것이 안정적이고 빠르므로 그냥 다운 받았다. 내가 다운 받은 폰트는 ttf 파일과 otf 파일 2가지가 있어서 ttf로 받았다.

 

이제 다운받은 폰트를 src/fonts/ 폴더 안에 넣어준다.

 

 

그리고 GlobalStyles에 추가해주면 된다. 나는 App.tsx에 GlobalStyles가 정의되어 있기 때문에 아래와 같이 작성하였다.

 

App.tsx

...생략
import GiantsInline from "./fonts/Giants-Inline.ttf";
import GiantsRegular from "./fonts/Giants-Regular.ttf";
import GiantsBold from "./fonts/Giants-Bold.ttf";

const router = createBrowserRouter([
	...생략
]);

const GlobalStyles = createGlobalStyle`
  ${reset};
  *{
    box-sizing: border-box;
  }
  @font-face {
    font-family: "GiantsRegular";
    src: url(${GiantsRegular}) format("truetype");
  }
  @font-face {
    font-family: "GiantsBold";
    src: url(${GiantsBold}) format("truetype");
  }
  @font-face {
    font-family: 'GiantsInline';
    src: url(${GiantsInline}) format('truetype');
    font-weight: 900;
    font-style: normal;
}
  body{
    background-color: black;
    color:white;
  }
`;

const Wrapper = styled.div`
  height: 100vh;
  display: flex;
  justify-content: center;
  font-family: GiantsRegular, sans-serif;
`;

function App() {
  const [isLoading, setLoading] = useState(true);
  const init = async () => {
    await auth.authStateReady();
    setLoading(false);
  };
  useEffect(() => {
    init();
  }, []);
  return (
    <Wrapper>
      <GlobalStyles />
      {isLoading ? <LoadingScreen /> : <RouterProvider router={router} />}
    </Wrapper>
  );
}

export default App;

GlobalStyles에 @font-face를 이용하여 다운받은 폰트들을 추가해주었다.

 

이제 사용하고 싶은 곳에서 font-family: NPSfontRegular 이런 식으로 사용하면 된다.

 

font-family: GiantsRegular, sans-serif;

이건 우선 GiantsRegular를 사용하는데, 이 폰트가 없다면 san-serif 계열 중 하나를 사용해달라는 뜻이다. 방문자의 pc에 글꼴이 없는 경우를 대비해서 예비 글꼴을 지정하는 기능이다.

근데 이렇게 폰트를 프로젝트에 넣어놓으면 예비 글꼴이 필요없을거 같긴 하다....

 

+

상위 컴포넌트에서 폰트를 지정하면 하위 컴포넌트들은 모두 폰트가 적용되는 줄 알았는데 font-size 같은 속성을 지정해준 styled-component는 폰트가 적용이 안돼서 따로 font-family 속성을 지정해줬다. 

 

[참고]

1. https://velog.io/@071yoon/Typescript-React-Styled-Component-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-Font-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

2. https://velog.io/@kim-jaemin420/Web-font%EC%9B%B9-%ED%8F%B0%ED%8A%B8%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C