[Flutter] font 추가하기

21. 10. 6.

- Could -

1. Asset으로 font 추가 및 변경하기
2. package를 사용한 google font 사용하기

1. Asset으로 font 추가 및 변경하기

외부 폰트를 사용하기 위해서는 assets을 등록해주어야 한다.

 

1) assets폴더 만들기

앱의 최상위 위치에 assets 폴더를 만들어주자. assets 말고 fonts나 다른 폴더명을 사용해도 되지만, 앱 개발을 하다보면 fonts 파일 말고도 다른 assets들을 사용할 일이 생길수도 있다.

그래서 개인적으로 assets/fonts/ 와 같은 경로를 만들어 폰트를 관리하는 걸 선호한다. 자기가 어떤 경로에 폴더를 만들고 폰트파일들을 관리할지만 생각해두면 마음대로 해도 상관 없다.

assets 폴더를 만들고 그 안에 fonts 폴더를 만들어주었다.

폴더를 만들었으면 그 안에 font파일을 드래그앤드롭(Darg&drop)으로 넣어준다.

 

2) pubspec.yaml에 assets 등록하기

폴더를 만들고 폰트까지 넣었지만 flutter는 아직 이 폴더와 폰트의 존재를 모른다. 사용하려면 pubspec.yaml 파일에 한가지 작업을 해주어야한다. 이 부분에서 경로를 잘못적거나, 스페이스를 두칸 띠어야 되는데 세칸 띠거나 해서 에러를 많이들 겪으니, 주의하기 바란다.

여기 보면 초록색으로 역시나 font를 등록하는 법이 상세하게 적혀있다.

아래와 같이 고쳐주자.

예제를 활성화 시켰다. 여기서 중요한 것은 스페이스 두칸이다. 스페이스 두칸을 꼭 지켜주기 바란다. 아래와 같은 형태로 적는다.

 

flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
        - asset: assets/fonts/Roboto-Italic.ttf
          style: italic
        - asset: assets/fonts/Roboto-bold.ttf
          weight: 700

 

추가적으로 조금 설명하자면 폰트는 Italic, bold 등 다양한 스타일을 적용할 수 있고 그렇기에 같은 종류의 폰트들을 family라는 그룹으로 묶어 관리한다. 그 하위 속성으로 fonts를 만들고  asset 이라는 속성 안에 폰트를 넣은 경로와 폰트파일의 이름과 확장자를 적어준다.

이후 flutter에서 해당 폰트를 사용하면 기본적으로  asset에 설정된 폰트파일이 적용되며, style 속성을 지정해준 경우, 해당 속성을 적용할 시, style이 적힌 폰트가 사용된다.

 

위와 같이 pubspec.yaml파일을 수정했다면 pub update를 해주어야한다. 그리고 만약 앱을 실행중이라면 바로 적용이 되지 않는데 해당앱을 종료했다가 다시 실행하면 적용된다. pubspec파일을 건드리는 부분은 hot reload기능으로 업데이트가 안되기 때문에 발생하는 현상이다.

 

3)  Font 적용하기

이런식으로 활용하면 된다.

 

2. Package를 활용한 google font 사용하기

디자인이 확정되지 않은 상태에서 어떤 폰트가 좋은지 이것저것 적용해 보면서 사용해 보려면 첫번째 방법 같은 경우는 공수가 너무 많이 든다. 그래서 관련된 패키지를 소개하고자 한다.

https://pub.dev/packages/google_fonts

google_fonts | Flutter Package

설치법과 사용법은 해당 패키지에서 자세하게 설명하고 있다.

1인 개발자거나 디자인이 확정되지 않은 상태에서 개발을 진행해야한다면 해당 패키지를 활용해 앱을 만들어 나가는 것이 정신건강에 이롭다. 추후 앱을 빌드하기 전에 첫번째 방법으로 폰트를 지정해서 정리해주면 된다.