폰트를 적용해보자! (폰트 다운로드)

프로젝트에 폰트를 적용하는 방법은 크게 2가지로,

1. 웹폰트를 적용하거나

2. ttf 형식의 파일을 다운로드 받아 프로젝트에 저장해서 사용하는 방법이 있습니다.

 

저도 처음에는 웹폰트를 적용했었는데요! 구글링을 하다보니 웹폰트 적용 방식으로 폰트를 서버-클라이언트 방식으로 폰트 파일을 받아오는데, 용량이 크고 사용자의 환경에 따라 로딩 속도가 느려지는 단점이 있다고 합니다. 따라서 ttf 형식의 폰트 파일을 다운로드 받아 저장해 사용해보려고 합니다.

 

1. 폰트 사이트에서 폰트를 고릅니다.

가장 유명하고 사용하기 쉬운 사이트는 구글 웹폰트와 눈누가 있습니다.

 

구글은 영어와 한국어 이외에도 다양한 국가의 언어를 지원하고, 눈누는 한글 폰트를 지원합니다.

언어별로 적용할 때 영어는 구글 웹폰트, 한국어는 눈누를 사용하면 좋을 것 같습니다.😎

https://fonts.google.com/

Google Fonts

https://noonnu.cc/

눈누 - 상업용 무료한글폰트 사이트

2. 폰트를 다운로드합니다.

구글 웹폰트와 눈누 모두 폰트 다운로드를 지원합니다. 눈누는 다운로드 버튼을 누르면 해당 폰트를 제작 및 배포한 기업의 사이트로 이동합니다!

우측 상단 '다운로드'를 클릭합니다.

해당 폰트를 배포하는 기업의 사이트로 이동합니다.

TTF와 OTF의 차이?🤔

자세한 설명을 원하는 경우 참고하세요!

TTF 와 OTF의 차이는? 폰트 다운로드 전 확인해보세요

TTF는 일반 문서 작업용, OTF는 포토샵 등 고해상도 작업용으로 사용하는 것이 적합하다고는 하는데, 개발 프로젝트를 위한 폰트라면 TTF 무방하다고 합니다! 그래서 저는 TTF로 다운로드 받았습니다.

3. 폰트 파일을 프로젝트 폴더에 저장합니다.

다운로드 받은 폴더를 압축 해제한 다음, 원하는 폴더에 저장합니다. 저는 styles폴더 안에 fonts 폴더를 만들어 저장했습니다.

4. App.css에 @font-family를 적용합니다.

형식은 다음과 같습니다.

형식에 맞추어 저는 아래와 같이 적용해봤습니다.

5. 폰트 적용을 원하는 곳에 font-family 속성으로 적용합니다.

저는 프로젝트 전체 폰트는 index.js의 body에 적용해봤습니다.

또한 헤더에는 다른 폰트를 적용했습니다. 

body, header에 적용했습니다.

예쁜 폰트를 다운로드 받아 프로젝트를 꾸며보시기 바랍니다. happy hacking!😊