@font-face, Fallback-Font :: 폰트 만들기

1. public/fonts 폴더 생성

public/fonts폴더 생성하고, 안에 폰트 파일을 추가한다.

2. @font-face :: 폰트 만들기

import { css } from "@emotion/react";

const globalStyles = css`
// 사용
* {
    font-family: "myFont"; 
  }

// 폰트 만들기
  @font-face {
      font-family: "myFont";
      src: url(/fonts/scifibit.ttf); // /는 public
  }
`;

Fallback-Font

• 폰트 다운로드 실패 시 대비책을 마련할 수 있다.
• 첫번째 폰트가 없으면 다음 폰트, 다음 폰트도 없으면 그 다음 순서의 폰트가 지정된다.