Flutter 초급

폰트 추가하기

codeJunH 2024. 9. 7. 15:27

폰트 파일 준비하기

먼저, 사용하고자 하는 폰트 파일(.ttf 또는 .otf 형식)을 준비한다.

무료로 사용 가능한 폰트는 Google Fonts와 같은 사이트에서 다운로드할 수 있다.

 

 

프로젝트에 폰트 파일 추가하기

  1. 프로젝트 루트 디렉토리에 asset 폴더를 생성하고, asset 폴더 안에 font 폴더를 만든다.
  2. 준비한 폰트 파일을 이 font폴더에 복사한다.

 

 

pubspec.yaml 파일 수정하기

pubspec.yaml 파일을 열고 다음과 같이 폰트를 선언한다:

  • family: parisienne: 폰트 패밀리의 이름을 'parisienne'으로 정의한다. 이 이름은 나중에 Flutter 코드에서 폰트를 참조할 때 사용된다.
  • fonts:: 이 폰트 패밀리에 포함된 폰트 파일들의 목록을 시작한다.
  • asset: asset/font/Parisienne-Regular.ttf: 실제 폰트 파일의 경로를 지정한다. 이 경우, 'Parisienne-Regular.ttf' 파일이 'asset/font/' 디렉토리에 위치해 있음을 나타낸다.

Parisienne 폰트는 단일 스타일(Regular)만 정의되어 있다. 이는 이 폰트가 하나의 두께로만 사용 가능함을 의미한다.

 

  • family: sunflower: 두 번째 폰트 패밀리의 이름을 'sunflower'로 정의한다.
  • 이 폰트 패밀리는 세 가지 다른 두께(weight)의 폰트 파일을 포함하고 있다:
  1. asset: asset/font/Sunflower-Light.ttf: 기본 두께(보통 weight: 400으로 간주됨)
  2. asset: asset/font/Sunflower-Medium.ttf weight: 500: 중간 두께
  3. asset: asset/font/Sunflower-Bold.ttf weight: 700: 굵은 두께

이렇게 설정함으로써, 'sunflower' 폰트를 사용할 때 세 가지 다른 두께 중에서 선택할 수 있게 된다.

 

 

폰트 사용하기

이제 Flutter 코드에서 새로운 폰트를 사용할 수 있다: 

실행 결과: 

실행 결과 이미지