google font in flutter

플러터에서 google font를 써보자.

 

공식 문서 중에서는 다음 글을 참고하면 되겠다.

Use a custom font

 

 

 

css를 link했던 웹 환경과 달리 직접 폰트를 다운로드 받아야 한다.

 

 

 

최상위 경로에 fonts라는 폴더를 생성한 후 tts를 전부 넣어줍시다.

 

 

 

그 후 pubspec.yaml에서 font를 활성화해주도록 합시다. 저는 Bold와 Regular만 설정했습니다. 그것만 쓸거거든요.

그 외의 다른 폰트들도 사용하고 싶다면 추가하면 됩니다.

flutter:
  uses-material-design: true
  fonts:
    - family: LobsterTwo
      fonts:
        - asset: fonts/LobsterTwo-Regular.ttf
        - asset: fonts/LobsterTwo-Bold.ttf
    - family: SourceSansPro
      fonts:
        - asset: fonts/SourceSansPro-Light.ttf

 

이제 활용하면 됩니다. fontFamily에 원하는 폰트를 지정해주면 반영됩니다. pubspec.yaml을 수정했으므로 디버깅을 다시 시작해야 반영됩니다. 한번 디버깅이 완료된 후에는 fontWeight에 bold를 주면 자동으로 fonts에 설정한 Bold로 hot-load됩니다.

Text("Darren", style: TextStyle(fontFamily: "LobsterTwo"),)

 

 

 

 

특정 텍스트가 아닌 전체 텍스트에 폰트를 적용하고 싶다면 MaterialApp의 theme 부분에 font-family를 적용해주면 된다. 다음 쿡북을 참고하자.

 

 

Use themes to share colors and font styles