리액트, 타입스크립트, Styled-component 에서 로컬 폰트적용하기

리액트에서 타입스크립트를 쓰면서 styled-component를 쓸 때, 로컬 폰트 적용하는 방법을 찾다가 다음 번에도 또 찾아다닐 거 같아서 정리해봅니다...
같은 서칭을 반복할 순 없지.......... .절대 뭐 귀찮다거나 그런 건 아니구용..

---

폰트 다운 받기

우선, 원하는 폰트를 다운 받아 줍니다. (저작권이나 허용 용도를 잘 확인하며 받도록 합시다)
저는 구글 폰트에 있는 Londrina Solid 를 받았습니다.

(대충 이런 폰트예요 귀엽지 않나요)

.ttf 형식으로 폰트를 받아서 작업 중인 폴더로 저장을 해줍니다.
저는 src 폴더 안에 fonts 폴더를 만들어서 넣어주었습니다.

일반 css 파일을 쓴다면 해당 파일에서 @font-face설정을 하고 바로 사용할 수 있었지만, styled-component를 방법이 살짝 다릅니다! Global 설정을 해주어야 사용할 수 있는데요!

폰트 Global 설정하기

global.ts 파일을 만들어서 폰트 전역 설정을 해줍니다.

// global.ts
import { createGlobalStyle } from "styled-components";
import LondrinaBlack from "./fonts/Londrina_Solid/LondrinaSolid-Black.ttf";
import LondrinaRegular from "./fonts/Londrina_Solid/LondrinaSolid-Regular.ttf";

export const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: "LondrinaBlack";
    src: local('LondrinaBlack'), local('LondrinaBlack');
    font-style: normal;
    src: url(${LondrinaBlack}) format('truetype');
  }
  @font-face {
    font-family: "LondrinaRegular";
    src: local('LondrinaRegular'), local('LondrinaRegular');
    font-style: normal;
    src: url(${LondrinaRegular}) format('truetype');
  }
`;

저는 Londrina 폰트의 Black 버전과 Regular 버전을 사용하기 위해 위와 같이 설정해주었습니다.
그리고 .ttf 파일 형식은 import가 안되기 때문에 이 역시도 따로 설정을 해주어야 합니다. 그래서 font.d.ts 파일을 만들어서 설정을 해주도록 합시다!

// fonts.d.ts
declare module "*.ttf";

그리고 main.tsx 파일로 넘어가서 글로벌 설정을 해주어야 합니다.

//main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import Providers from "./components/providers/Providers.tsx";
import { GlobalStyle } from "./global.ts";
//import { worker } from "./mocks/worker.ts";

// if (process.env.NODE_ENV === "development") {
// 	worker.start();
// }

ReactDOM.createRoot(document.getElementById("root")!).render(
	<React.StrictMode>
		<Providers>
			<GlobalStyle />
			<App />
		</Providers>
	</React.StrictMode>,
);

위와 같이 설정도 마쳤다면 폰트 사용을 위한 준비가 끝났습니다!
원하는 파트로 넘어가서 font-family 설정을 해주면 됩니다.
위에서 예시로 보여드렸던 파트로 넘어가면

h1 {
    font-size: 2rem;
    font-family: "LondrinaRegular";
  }

지정한 이름을 font-family에 넣어주면 적용되는 모습을 볼 수 있습니다!

그리고 다른 블로그들에서도 .ttf 파일 형식보다 .woff 형식을 사용하는 것이 로딩 환경을 개선할 수 있다고 말합니다! 이후에 웹 폰트를 사용하여 로딩 속도 개선을 시도해보아야겠습니다 :)

---

[071yoon 님의 블로그를 참고했습니다!](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)