[React] Font적용하기

목차

1. Font의 종류
2. Custom Font 적용하는 방법
3. 상업적으로 쓰고싶은 폰트 어디서 구하면 좋을까요?

 

1. Font의 종류

• TTF (True Type Font)
• OTF (Open Type Font)
• WOFF (Web Open Font Format)

 

TTF (True Type Font)
1980년대 마이크로소프트와 애플이 어도비에 대항하기 위해 만든 글꼴 저장 형식.
한때 비트맵을 대체하여 Windows 글꼴이 대부분 이 형식이었으나 지금은 레거시 기술이 됨,최신 Windows의 기본 글꼴은 대부분 OTF로 대체 됨.제어점이 3개인 2차 베지에 곡선(Quadratic Bezier)을 사용함.비슷한 글꼴 형식으로 OTF가 있다. 이쪽은 4개의 제어점을 기반으로 하는 3차 베지에 곡선(Cubic Bezier)을 사용함.

OTF(Open Type Font)
Microsoft Windows의 글꼴 트루타입은 대부분 이 형식으로 대체가 완료.
현재 최신 윈도우의 주력 폰트 타입이자 ISO가 표준으로 지정한 폰트 타입이다. 

우선 뜻 자체가 열린(Open) 글꼴이기 때문에, 
TTF보다 제작이 편리하고 사용상의 제약이 적다는 장점이 있다.
또한 제어점의 개수가 더 많은 3차원 
베지에 곡선으로 폰트를 렌더링하기 때문에 훨씬 미려한 곡선을 그릴 수 있다. 이 덕분에 그래픽 분야에서 주로 쓰이는 편이다.

웹에서는 보통 TTF와 함께 무분별하게 업로드 및 다운로드가 가능하기 때문에 웹에서는 
WOFF라는 글꼴 파일 형식을 권장하고 있다.

WOFF(Web Open Font Format)
OTF와 TTF의 무단배포 등의 문제 등을 해결하기 위해 
모질라 재단과 오페라 소프트웨어, 마이크로소프트에서 제안한 
웹 폰트 파일 형식

기본적으로 OTF, TTF를 이용한 구조를 하고 있으며, 압축된 버전이라 웹에서 다운받아가며 사용하기에 최적화되어있다.
또한 글꼴 파일내에서 라이센스 및 메타데이터 등을 따로 포함할 수 있어 저작권 문제에 도움을 준다.

이러한 이유 등으로 인해 
W3C의 웹 폰트 작업 그룹에서 권장하는 파일 형식이며 모든 브라우저에서 사용 가능하도록 표준화 되고 있는 추세이다.

이후, WOFF2 라는 파일 형식이 추가로 개발되었는데, 기존 WOFF에 비해 30% ~ 50% 정도 더 압축되어 훨씬 가볍다.

 

2.  Custom Font의 종류

  2.1 원하는 폰트 파일을 준비합니다 (TTF, OTF, WOFF 등등) 
        * 폰트 파일은 인터넷에 공유중인 파일이 많으며 상업용으로 사용시 꼭 라이센스 확인하시길 바랍니다.

  2.2 src > fonts디렉토리를 생성합니다.

폰트 디렉토리 생성

  2.3 fonts 디렉토리에 다운로드받은 폰트 파일을 위치합니다.

폰트를 넣었을때 스크린샷

  2.4 index.css 파일을 실행하여 전역적으로 사용 가능할수있도록 font-face를 등록합니다.

2.5  font-face를 생성한뒤 body에 font-family로 사용할 font-face를 넣어줍니다.

//2. 두번째로 이곳에 사용할 font-face를 font-family로 넣어주세요~
body {
  margin: 0;
  font-family: 'PrettyFont';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
  monospace;
}

//1. 제일 먼저 font-face를 추가해주세요! 아래 4개를 다 추가하지 마시고 본인의 폰트파일에 맞는 한가지 방식만 정의하세요
//TTF 방식
@font-face {
  font-family: 'PrettyFont';
  src: url('./fonts/Omyupretty.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

//OTF 방식
@font-face {
  font-family: 'PrettyFont';
  src: url('./fonts/Omyupretty.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

//WOFF 방식
@font-face {
  font-family: 'PrettyFont';
  src: url('./fonts/Omyupretty.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

//WOFF2 방식
@font-face {
  font-family: 'PrettyFont';
  src: url('./fonts/Omyupretty.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

여기까지 진행했으면 font를 사용하기 위한 밑작업이 끝났으며 이제부턴 내가 사용하고 싶은 컴포넌트에 css로 넣어주면 됩니다.

 

2.6 실제로 사용하고 싶은 컴포넌트에 font를 아래와 같이 넣어주면 됩니다.

.Sidebar {
    font-family: 'PrettyFont';
}

 

여기까지만 하면 폰트 사용 완료~

폰트 귀엽구뇽... ㅎㅎ

 

폰트가 적용된 결과물 페이지