타입스크립트 폰트 적용

👿 리액트 타입스크립트 프로젝트! 폰트 적용이 안된다!

`import YeongdeokSea from "./fonts/YeongdeokSea.woff";`

경로도 일치하고 똑바로 불러왔다고 생각했는데 자꾸 빨갛게 칠해지면서

./fonts/YeongdeokSea.woff 모듈 또는 해당 형식 선언을 찾을 수 없습니다 라는 오류가 보여진다.

🫠 왜 ???????

VSCode에서 파일을 클릭하면 아래처럼 뜬다.

폰트 확장자명이 잘못되었나 싶어 폰트 파일 확장자를 .eot .ttf .woff 골고루 해보았지만 똑같다.

인코딩 방식도 바꿔보았는데 똑같다. 이게 문제가 아닌가?

아무리 검색해봐도 다들 똑같은 코드를 작성하고 잘 불러와서 잘 쓰던데 뭐가 문제인지 못 찾았다.

그리고 import를 해오려면 export를 해야하는데 폰트파일 자체를 어떻게 export해야 하나 하던 중

구글링 중 어떤 분께서 svg파일을 못불러왔고, TypeScript에서는 해당 확장자의 파일을 모듈로 사용할 수 있도록 선언이 필요하다는 내용을 보게 되었다!

🎉 해결 방법

• 폰트파일 위치 : client>src>styles>fonts> YeongdeokSea.woff
• GlobalStyle.ts 파일 위치 : client>src>styles>GlobalStyle.ts

---

• 프로젝트 루트에 fonts.d.ts 파일을 생성해준다.

  • 💡 TypeScript에서 `.ttf` 파일을 모듈로 사용할 수 있도록 선언이 필요하다. 그러니까 모듈로 사용될 파일 타입을 선언해 주어야 하는 것!

declare module "*.ttf" {
  const value: any;
  export = value;
}
declare module "*.woff" {
  const value: any;
  export = value;
}

• 그리고 tsconfig.json 파일도 수정해준다. include 부분에 파일명 추가!

{
  "compilerOptions": {
    // ...
  },
  "include": ["src", "fonts.d.ts"],
  // ...
}

• GlobalStyle.ts 파일에서도 아래처럼 작성해 준다.

import { createGlobalStyle } from "styled-components";
import YeongdeokSea from "./fonts/YeongdeokSea.woff";

export const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'YeongdeokSea';
    src: url(${YeongdeokSea}) format('woff');
    font-weight: normal;
    font-style: normal;
  }

• 그리고 index.tsx 파일에 GlobalStyle을 import해서 사용해준다.

import { GlobalStyle } from "./styles/GlobalStyle";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <>
    <GlobalStyle />
    <App />
  </>
);

• 특정 파일에서 사용 시 따로 파일을 import할 필요 없이 바로 사용해주면 된다!

const TitleParagraph = styled.div`
  font-family: YeongdeokSea;

  font-style: normal;
  font-weight: 900;
  font-size: 26px;
  line-height: 32px;
  text-align: center;
`;